错误：重新渲染过多。 React 限制了渲染的数量以防止无限循环。反应js答案

【问题标题】：Error: Too many re-renders. React limits the number of renders to prevent an infinite loop. React js错误：重新渲染过多。 React 限制了渲染的数量以防止无限循环。反应js
【发布时间】：2022-01-11 11:11:25
【问题描述】：

我目前正在学习 react，但我有这个错误

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

这是代码

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

【问题讨论】：

标签： reactjs use-state

【解决方案1】：

setStatus 触发重新渲染，由于sessionStorage 没有更改，if 条件将保持为真。因此，您渲染无穷无尽并根据您发布的错误消息做出反应中止。

您应该使用useEffect，它仅在会话存储更改时触发。像这样的：

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

或者将依赖数组留空，只执行一次效果（当组件被挂载时）。

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

【讨论】：

它的作品谢谢

【解决方案2】：

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

您必须使用 useEffect 挂钩才能在首次加载时将本地状态设置为令牌值。这是文档：

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

在你的情况下，你必须更换：

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

作者：

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

如果您只想在第一次渲染组件时触发它，您可以将依赖数组保留为空，或者给它提供依赖，如果它们发生变化将再次触发useEffect。

【讨论】：

谢谢