如何在React中实现localStorage的响应式更新？

• localStorage是浏览器的持久化存储API，本身不具备响应式特性，修改它的值不会主动触发React组件的重渲染
• 你写的useEffect没有指定依赖数组，只会在组件首次挂载时执行一次，无法感知后续localStorage的变化
• 你的App组件中重复嵌套了<Router>标签，也可能导致路由跳转时的状态同步异常

方案1：使用Context API做全局状态共享（推荐，适配所有场景） #

这是React官方提供的跨组件状态共享方案，实现成本极低，完全满足当前需求：

1. 新建src/context/AuthContext.js文件，封装全局认证状态

import { createContext, useContext, useState } from 'react';
import { auth } from '你的auth函数所在文件路径';

const AuthContext = createContext();

export function AuthProvider({ children }) {
  const [authUser, setAuthUser] = useState(auth());

  // 登录时更新状态的方法
  const login = (userData) => {
    localStorage.setItem('jwt_data', JSON.stringify(userData));
    setAuthUser(userData);
  };

  // 登出时更新状态的方法
  const logout = () => {
    localStorage.removeItem('jwt_data');
    setAuthUser(false);
  };

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

// 自定义Hook方便全局调用
export const useAuth = () => useContext(AuthContext);

2. 修改App.js，包裹全局状态提供者，修正重复Router的问题

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { AuthProvider } from './context/AuthContext';
import Nav from './Nav';
import Home from './Home';
import Login from './Login';
import Logout from './Logout';

function App() {
  return (
    <div className="App">
      <AuthProvider>
        <Router>
          <Nav/>
          <Routes>
            <Route exact path="/home" element={<Home/>}/>
            <Route exact path="/login" element={<Login/>}/>
            <Route exact path="/logout" element={<Logout/>}/>
          </Routes>
        </Router>
      </AuthProvider>
    </div>
  );
}

3. 修改Login组件，登录成功后调用全局方法更新状态

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

function Login() {
  const { login } = useAuth();
  const navigate = useNavigate();

  // 登录接口请求成功后的逻辑
  const handleLoginSuccess = (userData) => {
    login(userData); // 这里会自动触发所有用到useAuth的组件重渲染
    navigate('/home');
  }
  // 其余逻辑省略
}

4. 修改Nav组件，直接从全局状态获取认证信息

import { useAuth } from '../context/AuthContext';

function Nav() {
  const { authUser } = useAuth();
  return (
    <>
      {authUser ? (
        // 登录态展示内容
      ) : (
        // 未登录态展示内容
      )}
    </>
  )
}

方案2：自定义事件监听（简单场景快速实现） #

如果不想引入Context，也可以通过自定义事件实现localStorage变化的监听，仅需要修改两处代码：

1. 在Nav组件中添加事件监听

const [authUser, setAuthUser] = useState(auth());

useEffect(() => {
  const updateAuth = () => setAuthUser(auth());
  // 监听自定义的存储更新事件
  window.addEventListener('authChange', updateAuth);
  return () => window.removeEventListener('authChange', updateAuth);
}, []);

2. 在登录、登出修改localStorage的代码后，手动触发事件

// 登录成功后
localStorage.setItem('jwt_data', JSON.stringify(userData));
window.dispatchEvent(new Event('authChange'));

// 登出时
localStorage.removeItem('jwt_data');
window.dispatchEvent(new Event('authChange'));

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