在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 时，它只会在第一次渲染时运行一次。而这正是你所需要的。

Answer 2

问题

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

useEffect 钩子没有依赖关系，因此它在每次组件渲染时都会运行，并且由于钩子回调最终会更新状态，它会触发另一个渲染周期。冲洗并重复，令人作呕（即渲染循环）。

解决方案

基本上我想先将复选框初始化为空/假 加载。

您可以使用带有空依赖数组的useEffect 在组件挂载时运行一次效果。

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

或者使用带有useState钩子的惰性状态初始化函数。

const [checkbox, setCheckBox] = useState(() => {
  let checkboxObj = {};
  rows.forEach((e) => {
    checkboxObj[e.id] = false;
  });
  return checkboxObj;
});

演示