React向后端发post请求时出现Too many re-renders报错如何排查？

死循环由useEffect的错误依赖配置直接触发：

• 你将user设置为useEffect的依赖项，每次调用setUser更新user状态后，都会重新触发useEffect执行GetUser函数
• 你设计的判断条件token !== "" && !user未生效，常见有两类原因：
  • 接口返回的res.data为falsy值（如null、undefined、空字符串、0等），执行setUser(res.data)后user仍为假值，每次执行GetUser都会重新进入请求逻辑
  • 自定义HookuseLocalStorage、子组件NavBar/Login内部存在隐式修改user或token的逻辑，导致user反复被重置为假值

核心修改：调整useEffect依赖 #

获取用户信息的触发逻辑应该是token发生变化，而非user变化，直接修改依赖项即可从根源切断循环：

// 新增loading状态避免同个token重复发起请求
const [loading, setLoading] = useState(false);

const GetUser = () => {
  if (token !== "" && !user && !loading) {
    setLoading(true);
    axios.post('/auth/getUser', { token }).then(res => {
      if (res.status === 200 && res.data) {
        // 校验返回值存在再更新user
        setUser(res.data);
      } else {
        setToken('');
        setUser(false);
      }
    }).catch(() => {
      setToken('');
      setUser(false);
    }).finally(() => {
      setLoading(false);
    })
  }
}

// 依赖改为token，仅token变化时触发获取用户信息
useEffect(() => {
  GetUser()
}, [token])

• 在GetUser函数开头打印token和user的值，确认是否每次执行时user都为假值
• 在setUser调用前打印res.data，确认接口返回值是否符合预期
• 临时注释NavBar、Login组件，排查是否为子组件修改父级状态导致的循环

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