如何防止 2 个相关输入在一个更新时导致无限循环

Question

我有 3 个接受用户输入的文本输入

货币 A 的金额
A 货币 A 的百分比
(2)作为货币B的百分比值

用户可以更改任何这些输入中的值。

更新百分比值（2）时，我需要计算并更新（3）中显示的值

用户也可以更改 (3) 中的值，百分比应在 (2) 中计算和更新

我正在使用 useEffect 来观察其中一个的变化并更新另一个，但这会导致无限循环，因为一旦我更改其中一个，另一个就会更新，这反过来导致 useEffect 在我刚刚更改的输入上变为运行等等...

处理 2 个值像这样相互依赖的输入的最佳方法是什么？

Answer 1

不明白第三个输入中的内容所以将其命名为 val2 并坚持使用公式 (1) * (2) = (3).

在此示例中，我们有 3 个值。
如果我们更改 val 1，我们将重新计算 val 3。
如果我们更改 val 2，我们将重新计算 val 3。
如果我们更改 val 3，我们将重新计算 val 2。
这可以很容易地在逻辑上改变。

import { useState } from "react";

export default function App() {
  const [amt1, setAmt1] = useState(1000);
  const [perc1, setPerc1] = useState(5);
  const [val2, setVal2] = useState(50);

  const handleAmt1 = (e) => {
    const amt = e.target.value;
    setAmt1(amt);
    setVal2(amt * perc1 * 0.01);
  };

  const handlePerc1 = (e) => {
    const perc = e.target.value;
    setPerc1(perc);
    setVal2(amt1 * perc * 0.01);
  };

  const handleVal2 = (e) => {
    const val = e.target.value;
    setVal2(val);
    setPerc1((val * 100) / amt1);
  };

  return (
    <div className="App">
      <input value={amt1} onChange={handleAmt1} />
      <input value={perc1} onChange={handlePerc1} />
      <input value={val2} onChange={handleVal2} />
    </div>
  );
}

如何防止 2 个相关输入在一个更新时导致无限循环

How to prevent 2 dependent inputs causing an infinite loop when one updates

reactjs

use-effect