登录后如何让useEffect即时获取更新后的localStorage用户ID？

问题原因 #

你当前的代码里，AppRoutes组件初始化时会执行localStorage.getItem("user_id")拿到初始值并赋值给ui。登录后虽然更新了localStorage并跳转到首页，但AppRoutes组件不会重新渲染，ui变量始终是初始化时的null，导致依赖ui的useEffect不会触发更新逻辑。

解决方案 #

方案一：通过路由跳转传递状态

登录成功后，直接通过navigate的state参数传递最新的user_id，在目标路由组件中接收并同步状态：

1. 修改Login.js的提交逻辑：

const handleSubmit = async (e) => {
  e.preventDefault();
  const response = await publicAPI.post("/login", { mobile, password });
  const userId = response?.user_id;
  localStorage.setItem("user_id", userId);
  // 跳转时携带user_id状态
  navigate("/", { state: { userId } });
};

2. 修改AppRoutes.js，通过useLocation接收状态并更新：

import { BrowserRouter, Routes, Route, useLocation } from "react-router-dom";
import { useState, useEffect } from "react";

const AppRoutes = () => {
  const location = useLocation();
  const [ui, setUi] = useState(localStorage.getItem("user_id"));

  // 监听路由state变化，同步最新的user_id
  useEffect(() => {
    const navUserId = location.state?.userId;
    if (navUserId) {
      setUi(navUserId);
    }
  }, [location.state]);

  useEffect(() => {
    if (ui) {
      console.log(ui);
    }
  }, [ui]);

  return (
    <BrowserRouter>
      <Routes>
        <Route path="/login" element={<Login />} />
        <Route path="/" element={<UserLayout />}>
          <Route index element={<Home />} />
        </Route>
      </Routes>
    </BrowserRouter>   
  );
};

方案二：监听localStorage变化（兼容跨标签页+同页面）

默认的storage事件只在其他标签页修改localStorage时触发，我们可以重写localStorage.setItem方法，让同页面修改也能触发事件：

1. 封装自定义Hook（可复用）：

import { useState, useEffect } from "react";

function useLocalStorage(key) {
  const [value, setValue] = useState(localStorage.getItem(key));

  useEffect(() => {
    const handleStorageChange = (e) => {
      if (e.key === key) {
        setValue(e.newValue);
      }
    };

    window.addEventListener("storage", handleStorageChange);

    // 重写setItem，触发自定义storage事件
    const originalSetItem = localStorage.setItem;
    localStorage.setItem = function(k, v) {
      originalSetItem.call(this, k, v);
      window.dispatchEvent(new StorageEvent("storage", { key: k, newValue: v }));
    };

    // 卸载时恢复原方法并移除监听
    return () => {
      window.removeEventListener("storage", handleStorageChange);
      localStorage.setItem = originalSetItem;
    };
  }, [key]);

  return value;
}

2. 在AppRoutes.js中使用这个Hook：

const AppRoutes = () => {
  const ui = useLocalStorage("user_id");

  useEffect(() => {
    if (ui) {
      console.log(ui);
    }
  }, [ui]);

  // ... 其余代码不变
};

方案三：使用全局状态管理（如Context/Redux）

如果项目规模较大，推荐使用React Context或Redux管理用户状态，登录时直接更新全局状态，其他组件可以实时获取最新值，无需依赖localStorage的监听。

以Context为例：

1. 创建用户Context：

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

const UserContext = createContext();

export function UserProvider({ children }) {
  const [userId, setUserId] = useState(localStorage.getItem("user_id"));

  // 登录时调用此方法更新状态
  const login = (id) => {
    setUserId(id);
    localStorage.setItem("user_id", id);
  };

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

export function useUser() {
  return useContext(UserContext);
}

2. 在入口文件包裹UserProvider：

import { UserProvider } from "./UserContext";

function App() {
  return (
    <UserProvider>
      <AppRoutes />
    </UserProvider>
  );
}

3. 修改Login.js使用Context：

import { useUser } from "./UserContext";

const Login = () => {
  const { login } = useUser();
  // ... 其他变量定义

  const handleSubmit = async (e) => {
    e.preventDefault();
    const response = await publicAPI.post("/login", { mobile, password });
    const userId = response?.user_id;
    login(userId);
    navigate("/");
  };

  // ... 其余代码
};

4. 在AppRoutes.js中获取全局状态：

import { useUser } from "./UserContext";

const AppRoutes = () => {
  const { userId } = useUser();

  useEffect(() => {
    if (userId) {
      console.log(userId);
    }
  }, [userId]);

  // ... 其余代码不变
};

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