Uncaught Error: Maximum update depth exceeded error with use

Question

为什么我得到这个错误?

Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.**

这是我的代码:

const [roles, setRoles] = useState([]);
useLayoutEffect(() => {
setRoles(["5nxg5wvb"]);
});

注意，当我使用useEffect时也会出现同样的错误，只有当我将代码更改为 时，这个错误才会消失:

useLayoutEffect(() => {
setRoles("5nxg5wvb");
});

如有任何帮助，我将不胜感激。

Answer 1

您需要在setEffect中提供一个依赖数组，否则它将在每次状态更改时运行。因为它在改变状态，这意味着它将运行，这导致它再次运行，这导致它再次运行，等等…

依赖数组告诉它何时运行。空数组表示"在挂载时运行此效果"，所以它只会运行一次。包含变量名的数组意味着"当这些变量中的任何一个发生变化时运行"。

useLayoutEffect(() => {
setRoles("5nxg5wvb");
}, []);

Answer 2

为什么会出现这个错误?

因为你正在使用useEffect或useLayoutEffect，而你没有指定钩子的第二个参数，你只放了第一个参数，这是回调函数，状态值总是不同的。

为什么放["5nxg5wvb"]不行，放"5nxg5wvb"不行?

1. 因为如果你使用[](一个数组)，你创建一个新的对象，并与以前的对象进行比较，每次它重新渲染(因为你没有指定钩子的第二个参数，但知道[] === []将导致false的值)
2. 而如果你使用""(一个字符串)，React将直接比较值，如果它是相同的，状态不会被更新，也不会重新渲染。

---

如何解决这个问题?

1. 你可以像这样设置钩子的第二个参数，下面的代码将使钩子只运行一次:

useLayoutEffect(() => {
setRoles(["5nxg5wvb"]);
}, []);

2. 只需像这样将新值直接放入useState，不需要将useEffect与静态数据一起放入:

const [roles, setRoles] = useState(["5nxg5wvb"]);

---

如果这两个建议都不适合你的用例，请添加更多关于你的用例的信息。