在 useEffect 中使用 setState 时如何防止我的 React 代码中出现无限循环

Question

请检查代码和框：https ://codesandbox.io/s/bold-hamilton-k1nzs

在我运行代码的那一刻，我得到了一个无限循环，您可以检查控制台以查看条目如何呈指数增长。最终网站崩溃了。

我有一个像这样的状态变量：

const [checkbox, setCheckBox] = useState({});

然后我在 useEffect 中调用一个函数：

useEffect(() => {
    createCheckbox();
  });

这是 createCheckbox 函数：

const createCheckbox = () => {
    let checkboxObj = {};
    rows.forEach((e) => {
      checkboxObj[e.id] = false;
    });
    setCheckBox(checkboxObj);
  };

我在第 76 行有一个 console.log 来展示问题。它是 console.log(checkbox)

知道发生了什么吗？

Answer 1

使用依赖数组useEffect。所以这：

  useEffect(() => {
    createCheckbox();
  });

应该：

  useEffect(() => {
    createCheckbox();
  }, []);

如您所知，useEffect()接受一个依赖数组作为第二个参数。它只会在数组中的任何变量发生变化时运行。当您在useEffect没有第二个参数的情况下运行时，它充当 componentDidMount 和 componentDidUpdate。因此，由于您在无依赖项的 useEffect 中设置了状态，状态更改会一次又一次地触发它，从而创建无限循环的渲染。

当useEffect使用空依赖数组调用时，它只会在第一次渲染时运行一次。而这正是你所需要的。