React Hooks 无限循环与数组

Question

当我在 React 的 useEffect 钩子中将数组分配给状态时，我有一个无限循环，我不确定为什么，因为我将状态series添加为依赖项。

const [series, setSeries] = useState([]);
useEffect(() => {
setSeries([1, 2, 3, 4]);
}, [series]);

具有字符串的相同代码不会创建无限循环

const [series, setSeries] = useState([]);
useEffect(() => {
setSeries('No Infinite Loop');
}, [series]);

Answer 1

您在钩子中添加了系列降级，并且您正在更新系列，因此每当系列更新该钩子时，都会调用 . 所以，它进入了无限。

const [series, setSeries] = useState([]);
useEffect(() => {
setSeries([1, 2, 3, 4]);
}, []);

Answer 2

React 在涉及状态时会进行浅相等性检查，除非另有定义。 当你这样做setSeries([1, 2, 3, 4]);时，你每次调用这个效果时都会[1, 2, 3, 4]创建数组，并且由于你的useEffect依赖于series，它将被无限调用。

另一方面，字符串的浅层比较不会导致无限循环，因为它们是"浅相等的"。

Answer 3

[1,2,3]!==[1,2,3]"123"==="123"当您将数组设置为依赖项并将该数组用作状态时，数组会在setSeries时"更改"所有内容，进而触发渲染，进而触发useEffect进而触发setSeries依此类推