useEffect中的React setState会导致无限的渲染周期

Question

我正在尝试构建一个计算器，让您看到比较比值。 但是使用我当前的方法，当用户编辑num1或num2 ，它会导致计算值的无限重新渲染。 我无法弄清楚如何避免这种情况，因为calc1和calc2都取决于比率，但也相互依赖。

我如何使用功能组件实现这一目标？

import React, { useEffect } from "react";
import ReactDOM from "react-dom";
import { useState } from "react";

function App() {
  let [num1, setNum1] = useState(5);
  let [num2, setNum2] = useState(10);
  let [ratio, setRatio] = useState();

  let [calc1, setCalc1] = useState();
  let [calc2, setCalc2] = useState();

  useEffect(() => {
    setRatio(num2 / num1);
  }, [num1, num2]);

  useEffect(() => {
    setCalc1(calc2 / ratio);
  }, [calc2, ratio]);

  useEffect(() => {
    setCalc2(calc1 * ratio);
  }, [calc1, ratio]);

  return (
    <div className="App">
      <input
        type="number"
        value={num1}
        onChange={e => setNum1(e.target.value)}
      />{" "}
      is to{" "}
      <input
        type="number"
        value={num2}
        onChange={e => setNum2(e.target.value)}
      />
      <p>Ratio is {ratio} therefore</p>
      <input
        type="number"
        value={calc1}
        onChange={e => setCalc1(e.target.value)}
      />{" "}
      ={" "}
      <input
        type="number"
        value={calc2}
        onChange={e => setCalc2(e.target.value)}
      />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 1

这里有一个循环依赖，当setCalc1触发然后calc1更改，所以第二个useEffect触发setCalc2将修改calc2 ，因为在第一个useEffect的依赖将重启循环，依此类推。

useEffect(() => {
    setCalc1(calc2 / ratio);
  }, [calc2, ratio]);

  useEffect(() => {
    setCalc2(calc1 * ratio);
  }, [calc1, ratio]);

你必须重构你的代码以避免这种依赖，例如使用包装calc1和calc2的对象

https://codesandbox.io/s/immutable-forest-typwu