小编典典

useEffect 中的无限循环

all

我一直在玩 React 16.7-alpha 中的新钩子系统,当我正在处理的状态是对象或数组时,在 useEffect 中陷入了无限循环。

首先,我使用 useState 并使用这样的空对象启动它:

const [obj, setObj] = useState({});

然后,在 useEffect 中,我再次使用 setObj 将其设置为空对象。作为第二个参数,我传递 [obj],希望如果对象的 内容
没有更改,它不会更新。但它一直在更新。我猜是因为无论内容如何,​​这些都是不同的对象,让 React 认为它在不断变化?

useEffect(() => {
  setIngredients({});
}, [ingredients]);

数组也是如此,但作为一个原语,它不会像预期的那样陷入循环。

使用这些新的钩子,在检查天气内容是否发生变化时,我应该如何处理对象和数组?


阅读 54

收藏
2022-08-17

共1个答案

小编典典

将空数组作为第二个参数传递给 useEffect 使其仅在挂载和卸载时运行,从而停止任何无限循环。

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

在https://www.robinwieruch.de/react-hooks/上关于 React hooks 的博客文章中向我澄清了这一点

2022-08-17