React Context中LocalStorage失效求助：useEffect存储用户信息失败

你的代码中，useEffect的作用是读取LocalStorage中的用户数据到组件state，而非负责存储逻辑。存储操作仅在login函数中执行，但可能存在以下几个导致存储失败的原因，对应解决方案如下：

1. 仅登录时存储，后续用户数据修改未同步 #

如果之后通过setUser修改用户信息（比如更新头像、昵称），当前代码不会自动同步到LocalStorage。需要添加监听user变化的useEffect，实现自动同步：

const AuthContext = createContext()

const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(null); 

  // 组件挂载时读取LocalStorage到state
  useEffect(() =>{
    const storedUser = JSON.parse(localStorage.getItem('user'))
    if (storedUser) { // 避免null覆盖已有state
      setUser(storedUser)
    }
  },[])

  // 监听user变化，自动同步到LocalStorage
  useEffect(() =>{
    if (user) { // 避免存储null值
      localStorage.setItem('user', JSON.stringify(user));
    }
  },[user]) // 依赖项设为user，每次user更新时触发

  const login = (userData) => {
    setUser(userData); // 无需重复存储，交给上面的useEffect处理
  };

  const getUser = () => {
    return JSON.parse(localStorage.getItem("user"))
  }

  // 补充缺失的Context.Provider返回逻辑
  return (
    <AuthContext.Provider value={{ user, login, getUser }}>
      {children}
    </AuthContext.Provider>
  )
}

2. JSON序列化失败 #

如果传入login的userData包含不可序列化的数据（比如函数、Symbol、循环引用），JSON.stringify会执行失败。需要确保userData仅包含可序列化类型：

const login = (userData) => {
  // 剔除不可序列化的属性（比如函数）
  const serializableUser = Object.fromEntries(
    Object.entries(userData).filter(([key, val]) => typeof val !== 'function')
  );
  setUser(serializableUser);
};

3. 未正确调用login函数 #

确认登录逻辑中已正确调用login并传入有效userData，比如接口返回数据后：

const handleLogin = async () => {
  const res = await fetch('/api/login', { method: 'POST', body: JSON.stringify(loginForm) });
  const userData = await res.json();
  login(userData); // 确保此处正确调用
}

4. 浏览器存储权限限制 #

部分浏览器在隐私模式下会禁用LocalStorage，或站点无存储权限。可通过浏览器控制台（F12 → Console）查看是否有相关报错。

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