反应：在其他状态的帮助下更新状态

发布于 2025-02-05 21:26:51 字数 1080 浏览 2 评论 0原文

我在组件中有三个不同的状态变量。当我移动滑块时，两个状态连接到更新状态的范围滑块。一个是为了成本，一个是为了时间。

我的问题是，如何根据前两个状态的信息来更新第三个状态？

function Calculator() {
  const [loanAmount, setLoanAmount] = useState(100000);
  const [loanTime, setLoanTime] = useState(5);

  const calculateCost = () => {
    const totalMonths = loanTime * 12;
    const monthlyFee = 0.00825;
    const monthlyFeePlusOne = 1.00825
    const totalPrice =
    (loanAmount*0.00825)*(Math.pow((1+0.00825), 60))/(Math.pow((1+0.00825), 60)-1);
    return Math.round(totalPrice);
  };
  const [calculation, setCalculation] = useState(calculateCost());


   <input
    className="slider"
    type="range"
    min="20000"
    max="200000"
    value={loanAmount}
    step="10000"
    onChange={(e) => setLoanAmount(e.target.value)}
  />
  <label>{loanAmount}</label>

  <input
    className="slider"
    type="range"
    min="2"
    max="10"
    value={loanTime}
    step="1"
    onChange={(e) => setLoanTime(e.target.value)}
    setCalculation
  />
  <label> {calculation} </label>

原文

I have three different state variables in a component. Two of the states is connected to a range slider that updates the state when i move the slider. One is for cost and one is for time.

My questions is, how do i update the third state based on information from the first two states?

function Calculator() {
  const [loanAmount, setLoanAmount] = useState(100000);
  const [loanTime, setLoanTime] = useState(5);

  const calculateCost = () => {
    const totalMonths = loanTime * 12;
    const monthlyFee = 0.00825;
    const monthlyFeePlusOne = 1.00825
    const totalPrice =
    (loanAmount*0.00825)*(Math.pow((1+0.00825), 60))/(Math.pow((1+0.00825), 60)-1);
    return Math.round(totalPrice);
  };
  const [calculation, setCalculation] = useState(calculateCost());


   <input
    className="slider"
    type="range"
    min="20000"
    max="200000"
    value={loanAmount}
    step="10000"
    onChange={(e) => setLoanAmount(e.target.value)}
  />
  <label>{loanAmount}</label>

  <input
    className="slider"
    type="range"
    min="2"
    max="10"
    value={loanTime}
    step="1"
    onChange={(e) => setLoanTime(e.target.value)}
    setCalculation
  />
  <label> {calculation} </label>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

故人爱我别走 2025-02-12 21:26:52

第三值不是状态，因为您可以始终从其他状态/道具进行计算。

尝试

const [calculation, setCalculation] = useState(calculateCost());

用

const calculation = calculateCost();

使其状态替换是多余的，并使代码复杂化。

The third value isn't state because you can always calculate it from other state/props.

Try replacing

const [calculation, setCalculation] = useState(calculateCost());

with

const calculation = calculateCost();

Making it state is redundant and complicates the code.

回复收藏 0 原文

堇色安年 2025-02-12 21:26:52

第一个答案表明，使用使用进行此操作，这是许多开发人员这样做的典型方式，但这不是useFeffect的目的，如React文档中所述：<强>如果您的效果仅根据另一个状态调整某些状态，则可能不需要效果。

https://beta-reactjs-org-git-git-git-fbopensource.vercel.vercel.vercel.app/learn/learn/synchronizing -with-effects＃you-might-not-not-not-an-effect

因此，您应该在输入的onChange事件中执行此操作不是渲染本身（这是useffect是什么）。

const handleLoanAmountInputChange = (e) => {
  const amount = e.currentTarget.value;
  setLoanAmount(amount);
  const cost = calculateCost(amount, loanTime); // you will ned to update your function to use parameters, this way it will also easier to test the function
  setCalculation(cost);
}

<input
  onChange={handleLoanAmountInputChange}

The first answer suggests doing it using useEffect which is the typical way a lot of developers do it, but that's not what useEffect is for, as stated in the React documentation: If your effect only adjusts some state based on another state, you might not need an effect.

https://beta-reactjs-org-git-effects-fbopensource.vercel.app/learn/synchronizing-with-effects#you-might-not-need-an-effect

So, you should perform this operation in the onChange event of your inputs since the state update is tied to it and not the render itself (which is what useEffect is for).

const handleLoanAmountInputChange = (e) => {
  const amount = e.currentTarget.value;
  setLoanAmount(amount);
  const cost = calculateCost(amount, loanTime); // you will ned to update your function to use parameters, this way it will also easier to test the function
  setCalculation(cost);
}

<input
  onChange={handleLoanAmountInputChange}

回复收藏 0 原文

~没有更多了~