React如何触发组件重渲染？登录后localStorage更新Header不刷新

问题根因 #

React 组件仅在自身 state、接收的 props 发生变化，或父组件触发重渲染时才会更新。你在 ToolBar 组件中直接读取 localStorage 的逻辑只会在组件首次渲染时执行一次，登录操作修改 localStorage 本身不会触发组件重渲染，因此 Header 不会自动更新为登录后的状态。

最优解决方案：使用 Context 实现全局用户状态共享 #

这个方案改动量小，符合 React 全局状态管理的最佳实践，适配你全局 Header 的使用场景：

1. 新建全局用户状态管理文件 #

创建 UserContext.js 文件，内容如下：

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

const UserContext = createContext();

export const UserProvider = ({ children }) => {
  const [currentUser, setCurrentUser] = useState(null);

  // 组件初始化时从 localStorage 读取已保存的用户信息
  useEffect(() => {
    const savedUser = localStorage.getItem('user-info');
    if (savedUser) {
      setCurrentUser(JSON.parse(savedUser));
    }
  }, []);

  // 登录时调用，同步更新本地存储和全局状态
  const login = (userInfo) => {
    localStorage.setItem('user-info', JSON.stringify(userInfo));
    setCurrentUser(userInfo);
  };

  // 登出时调用，清除用户信息
  const logout = () => {
    localStorage.removeItem('user-info');
    setCurrentUser(null);
  };

  return (
    <UserContext.Provider value={{ currentUser, login, logout }}>
      {children}
    </UserContext.Provider>
  );
};

// 自定义 Hook 简化上下文调用
export const useUser = () => useContext(UserContext);

2. 全局注入状态容器 #

在项目入口文件（通常是 index.js）中用 UserProvider 包裹根组件，让所有组件都可以访问用户状态：

import { UserProvider } from './UserContext';
import App from './App';

ReactDOM.render(
  <UserProvider>
    <App />
  </UserProvider>,
  document.getElementById('root')
);

3. 修改 ToolBar 组件逻辑 #

替换原有直接读取 localStorage 的逻辑，改为从上下文获取用户状态：

import { useUser } from '../../UserContext';
import { useHistory } from 'react-router-dom';

const ToolBar = () => {
  const history = useHistory();
  const { currentUser, logout } = useUser();

  const logoutHandler = () => {
    logout();
    history.push("/login");
  };

  return (
    <div className={classes.NavigationBar}>
      <h1>
        <Link to="/">Pharmashop</Link>
      </h1>
      <NavLinks logout={logoutHandler}/>
      {currentUser ? 
        <h5>Welcome {currentUser.name} !</h5>
       : 
        <RegisterButton />
      }
    </div>
  );
};

export default ToolBar;

4. 适配登录页面逻辑 #

在登录接口请求成功的回调中，调用上下文提供的 login 方法，触发全局状态更新，Header 会自动重渲染：

import { useUser } from '../UserContext';
import { useHistory } from 'react-router-dom';

// 登录组件内部逻辑
const Login = () => {
  const { login } = useUser();
  const history = useHistory();

  const handleLoginSubmit = async (formData) => {
    // 调用登录接口，拿到返回的用户信息 userInfo
    const userInfo = await loginApiRequest(formData);
    // 更新全局用户状态
    login(userInfo);
    // 跳转到首页或其他目标页面
    history.push('/');
  };

  // 剩余组件逻辑省略
}

额外优化建议 #

你当前登出逻辑中使用的 localStorage.clear() 会清空站点所有本地存储数据，建议改为 localStorage.removeItem("user-info") 仅删除用户信息，避免误删其他业务模块存储的内容。

内容的提问来源于stack exchange，提问作者Hazem Ben Abdelhafidh