React组件无限渲染修复：auth.js最大更新深度超限问题解决

问题说明 #

控制台出现报错：

[1836] auth.js:15 Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render. at AuthProvider (http://localhost:3000/static/js/main.chunk.js:1045:3)

问题根源是AuthProvider中的useEffect未正确设置依赖，导致每次渲染都触发setState，进而引发无限循环渲染。

修正后的带注释代码 #

import React from "react";
import { useState, useEffect, useContext, createContext } from "react";

const AuthContext = createContext();

const AuthProvider = ({ children }) => {
  const [auth, setAuth] = useState({
    user: null,
    token: "",
  });
  
  useEffect(() => {
    // 仅在组件首次挂载时从localStorage读取认证信息，避免重复执行
    const data = localStorage.getItem("auth");
    if (data) {
      const parseData = JSON.parse(data);
      // 使用函数式更新，直接基于上一次状态修改，无需依赖外部auth变量
      setAuth(prevAuth => ({
        ...prevAuth,
        user: parseData.user,
        token: parseData.token,
      }));
    }
  }, []); // 空依赖数组，确保该effect仅在组件挂载时执行一次

  return (
    <AuthContext.Provider value={[auth, setAuth]}>
      {children}
    </AuthContext.Provider>
  );
};

// 自定义Hook，简化Context调用
const useAuth = () => useContext(AuthContext);

export { useAuth, AuthProvider };

关键修复点 #

• 空依赖数组：给useEffect添加[]作为依赖，确保读取localStorage的逻辑只在组件挂载时执行一次，不会反复触发。
• 函数式状态更新：使用setAuth(prevAuth => {...})的形式，避免依赖外部的auth状态，同时保证状态更新的准确性，也不会因为依赖项变化导致effect重复执行。

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