错误：太多次重新渲染。React 限制了重新渲染的次数，以防止无限循环。React js。

Question

我目前正在学习React，但我遇到了这个错误

错误：重新渲染太多。 React限制渲染的次数以防止无限循环。

这是代码：

    const [Status, setStatus] = useState(false);
    if (sessionStorage.getItem("token")) {
        setStatus(true);
    }```

- Zulfikar

Answer 1

您正在渲染组件时进行状态更改。通过进行状态更改，您将触发新的渲染，因此会创建一个渲染循环。

您必须使用useEffect钩子来在首次加载时将本地状态设置为令牌值。以下是文档：

https://reactjs.org/docs/hooks-effect.html

在您的情况下，您将需要替换：

if (sessionStorage.getItem("token")) {
     setStatus(true);
}

由：

useEffect(() => {
   if (sessionStorage.getItem("token")) {
       setStatus(true);
   }
}, [])

如果您希望仅在组件首次渲染时触发它，可以将依赖数组留空，或者给它提供一些依赖项，如果它们发生更改，将再次触发useEffect。

- Ivo

Answer 2

setStatus 触发重新渲染，由于 sessionStorage 没有改变，因此 if 条件仍然为真。因此您会无限地进行渲染，并且 React 将使用您发布的错误消息中止。

您应该使用一个只在 session storage 改变时触发的 useEffect。像这样：

const token = sessionStorage.getItem("token");
useEffect(() => {
    setStatus(token !== undefined);
}, [token]);

或者将依赖项数组留空，仅在组件挂载时执行该 effect 一次。

useEffect(() => {
    if (sessionStorage.getItem("token")) {
        setStatus(true);
    }
}, []);

- René Link

---

它有效了，谢谢。 - Zulfikar