React触发Too many re-renders无限重渲染报错如何解决？

React 组件的函数体在每次渲染时都会完整执行一遍，你将状态更新函数 setStatus 直接放在了组件顶层逻辑中，会触发无限渲染循环：

• 组件首次渲染时，判断 sessionStorage 存在 token 就会调用 setStatus(true)
• 调用状态更新函数会强制触发组件重新渲染
• 重新渲染时会再次执行顶层的 if 判断，重复调用 setStatus，触发下一轮渲染
  React 内置的保护机制检测到异常高频重渲染后，就会抛出你遇到的这个报错，避免程序崩溃。

根据你的使用场景可以选择以下两种方案：

方案1：初始化时仅执行一次判断 #

如果你的需求是组件首次挂载时读取 token 设置状态，后续不需要重复判断，可以把逻辑放到 useEffect 钩子中，空依赖数组保证逻辑仅执行一次：

import { useState, useEffect } from 'react';

// 组件内部代码
const [Status, setStatus] = useState(false);

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

方案2：直接在状态初始化时赋值 #

如果你只是需要给状态赋初始值，不需要后续通过更新状态触发重渲染，可以直接在 useState 的入参中完成判断，代码更简洁：

// !! 用于将 getItem 返回的字符串/null 转为布尔值，和原逻辑完全等价
const [Status, setStatus] = useState(!!sessionStorage.getItem("token"));

内容的提问来源于stack exchange，提问作者Zulfikar Ditya