React渲染异常：Sign Out按钮需刷新页面才显示问题排查

• useState的初始值计算逻辑只会在组件首次挂载时执行1次：你在登录页把用户信息写入localStorage时，Header组件如果是作为公共布局常驻页面没有被卸载重建，它内部的token状态不会自动感知localStorage的变化，仍然是初始的空值，所以条件判断只会渲染登录/注册按钮。只有刷新页面触发组件全量重挂载，才会重新读取localStorage里的token，显示退出按钮。
• 额外逻辑隐患：退出方法里setToken()没有传入明确的空值，会把token置为undefined，和初始值的空字符串类型不一致，容易触发隐式类型判断bug；另外按钮文本存在拼写错误，Sing正确拼写为Sign。
• 本质原因：localStorage本身不是响应式数据源，修改localStorage不会主动触发React组件重渲染，必须手动同步状态到React的状态流里才能更新UI。

不要在各个组件里零散读取localStorage，用全局状态统一维护登录凭证，从根源解决状态不同步问题。轻量场景直接用React Context即可，不需要引入额外状态库。

步骤1：封装全局认证上下文 #

新建src/context/AuthContext.js，统一管理token的读写、登录退出逻辑：

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

const AuthContext = createContext(null);

export const AuthProvider = ({ children }) => {
  // 初始化时统一从localStorage读值
  const [token, setToken] = useState(() => {
    const userCache = localStorage.getItem('user');
    return userCache ? JSON.parse(userCache).token : '';
  });

  // 登录成功后调用，同步更新缓存和状态
  const handleLogin = (userInfo) => {
    localStorage.setItem('user', JSON.stringify(userInfo));
    setToken(userInfo.token);
  };

  // 退出时调用，同步清空缓存和状态
  const handleLogout = () => {
    localStorage.removeItem('user');
    setToken('');
  };

  return (
    <AuthContext.Provider value={{ token, handleLogin, handleLogout }}>
      {children}
    </AuthContext.Provider>
  );
};

// 封装自定义hook简化调用
export const useAuth = () => useContext(AuthContext);

步骤2：根组件注入全局上下文 #

修改App.js，用AuthProvider包裹路由和公共组件，让所有子组件都能访问到认证状态：

import { BrowserRouter } from 'react-router-dom';
import { AuthProvider } from './context/AuthContext';
import Header from './components/Header';
// 其他路由、组件导入省略

function App() {
  return (
    <BrowserRouter>
      <AuthProvider>
        <Header />
        {/* 路由配置放在这里 */}
      </AuthProvider>
    </BrowserRouter>
  );
}

export default App;

步骤3：修改Header组件消费全局状态 #

import React from 'react';
import './header.css';
import { Link, useNavigate } from 'react-router-dom';
import { useAuth } from '../context/AuthContext';

const Header = () => {
  const { token, handleLogout } = useAuth();
  const navigate = useNavigate();

  const signOutHandler = (e) => {
    e.preventDefault();
    handleLogout();
    navigate('/login');
  };

  return (
    <nav>
      <ul>
        {!token && (
          <>
            <li>
              <Link to="/login">
                <button>Sign in</button>
              </Link>
            </li>
            <li>
              <Link to="/register">
                <button>Register</button>
              </Link>
            </li>
          </>
        )}
        {token && (
          <li>
            <Link to="/login" onClick={signOutHandler}>
              <button>Sign Out</button>
            </Link>
          </li>
        )}
      </ul>
    </nav>
  );
};

export default Header;

步骤4：修改登录页逻辑 #

在登录页拿到接口返回的用户信息后，不再直接操作localStorage，而是调用handleLogin方法更新全局状态即可，登录成功后Header会自动重渲染显示退出按钮，不需要刷新页面。

// 登录页示例代码
import { useAuth } from '../context/AuthContext';
import { useNavigate } from 'react-router-dom';

const LoginPage = () => {
  const { handleLogin } = useAuth();
  const navigate = useNavigate();

  const submitLogin = async (formData) => {
    // 省略接口请求逻辑，假设res是接口返回的用户信息，包含token字段
    const res = await loginApi(formData);
    handleLogin(res);
    navigate('/');
  };

  // 其余表单逻辑省略
};

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