登录时屏幕闪烁且失败，API返回200并报Maximum update depth exceeded错误

Maximum update depth exceeded 错误的核心是组件或状态进入了无限更新循环，结合你遇到的登录后闪屏、报错指向ProtectedRoute的场景，常见触发点有：

• ProtectedRoute在渲染阶段直接执行导航跳转或状态更新，导致每次渲染都触发新的更新，形成循环
• AuthContext中的状态更新逻辑被错误触发，比如在组件渲染时无条件调用setUser/setAuthenticated，引发上下文状态反复更新，进而让依赖它的ProtectedRoute反复渲染
• 路由判断逻辑存在漏洞，比如未正确处理加载状态，导致在已登录/未登录状态间反复跳转

1. 修复ProtectedRoute的循环渲染问题 #

ProtectedRoute最容易踩的坑是直接在函数体里执行导航操作，而非用useEffect包裹逻辑，只在状态变化时触发。

错误示例（触发循环）： #

// 错误写法：每次渲染都会执行跳转，导致无限循环
const ProtectedRoute = ({ children }: { children: React.ReactNode }) => {
  const { authenticated } = useAuth();
  const navigate = useNavigate();

  if (!authenticated) {
    navigate('/login');
  }

  return <>{children}</>;
};

修正写法： #

import { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { useAuth } from './AuthContext';

const ProtectedRoute = ({ children }: { children: React.ReactNode }) => {
  const { authenticated, loading } = useAuth();
  const navigate = useNavigate();

  // 仅在认证状态或加载状态变化时执行导航判断
  useEffect(() => {
    if (!loading && !authenticated) {
      navigate('/login');
    }
  }, [authenticated, loading, navigate]);

  // 加载状态显示占位组件，避免闪屏
  if (loading) {
    return <div>加载中...</div>;
  }

  return authenticated ? <>{children}</> : null;
};

export default ProtectedRoute;

2. 修复AuthContext的状态更新逻辑 #

确保登录逻辑仅在API请求完成后更新状态，且避免在渲染阶段无条件触发状态更新，同时正确处理API返回200但业务逻辑失败的情况。

修正后的AuthContext示例： #

import { createContext, useContext, useState, useEffect } from 'react';

interface User {
  id: string;
  username: string;
  // 其他用户字段
}

interface LoginCredentials {
  username: string;
  password: string;
}

interface AuthContextType {
  authenticated: boolean;
  user: User | null;
  loading: boolean;
  login: (credentials: LoginCredentials) => Promise<void>;
}

const AuthContext = createContext<AuthContextType | undefined>(undefined);

export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
  const [authenticated, setAuthenticated] = useState(false);
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState(true);

  // 初始化时检查本地缓存的认证状态，避免重复登录
  useEffect(() => {
    const token = localStorage.getItem('authToken');
    if (token) {
      setAuthenticated(true);
      const savedUser = localStorage.getItem('user');
      if (savedUser) setUser(JSON.parse(savedUser));
    }
    setLoading(false);
  }, []);

  const login = async (credentials: LoginCredentials) => {
    setLoading(true);
    try {
      const response = await fetch('/api/login', {
        method: 'POST',
        body: JSON.stringify(credentials),
        headers: { 'Content-Type': 'application/json' },
      });

      if (response.ok) {
        const data = await response.json();
        // 持久化认证信息
        localStorage.setItem('authToken', data.token);
        localStorage.setItem('user', JSON.stringify(data.user));
        // 仅更新一次状态
        setAuthenticated(true);
        setUser(data.user);
      } else {
        // 处理API返回200但业务失败的情况（比如密码错误）
        const errorData = await response.json();
        throw new Error(errorData.message || '登录失败');
      }
    } catch (error) {
      console.error('登录错误:', error);
      throw error; // 抛出错误让调用方处理提示
    } finally {
      setLoading(false);
    }
  };

  const value = {
    authenticated,
    user,
    loading,
    login,
  };

  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
};

export const useAuth = () => {
  const context = useContext(AuthContext);
  if (context === undefined) {
    throw new Error('useAuth必须在AuthProvider内部使用');
  }
  return context;
};

3. 排查PageMeta组件的潜在影响 #

如果PageMeta依赖了认证状态，需确保它没有在渲染阶段触发状态更新或导航操作，所有依赖状态的逻辑都要放在useEffect中执行。

• 检查登录按钮的onClick事件是否被多次绑定，导致重复调用login函数
• 查看浏览器localStorage，确认认证token和用户信息是否正确存储
• 用React DevTools查看组件渲染次数，定位无限重渲染的具体组件

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