React Context+TypeScript子组件无法持久化全局userStatus状态

核心原因 #

React Context 搭配 useState 维护的状态仅存在于内存中，页面刷新、浏览器重启后会被重置；SPA路由跳转本身不会清空状态，但刷新根路径会重新初始化App组件，导致状态回到初始的LoggedOff。

解决方案：结合本地存储同步状态 #

将状态同步到localStorage或sessionStorage，初始化时从本地读取状态，更新状态时同步写入本地存储，具体代码修改如下：

1. 修改app.tsx的状态初始化与同步逻辑 #

import { useState, useEffect } from 'react';
import { UserStatus, UserStatusContext } from './context';

function App() {
  // 初始化时优先从localStorage读取状态，无缓存则用默认值
  const [userStatus, setUserStatus] = useState<UserStatus>(() => {
    const savedStatus = localStorage.getItem('userStatus');
    return savedStatus ? (savedStatus as UserStatus) : UserStatus.LoggedOff;
  });

  // 监听状态变化，自动同步到localStorage
  useEffect(() => {
    localStorage.setItem('userStatus', userStatus);
  }, [userStatus]);

  return (
    <UserStatusContext.Provider value={{ userStatus, setUserStatus }}>
      {/* 你的路由/页面组件 */}
    </UserStatusContext.Provider>
  );
}

2. 增强枚举类型的安全性（可选） #

如果UserStatus是TypeScript枚举，可封装工具函数处理序列化与反序列化，避免类型错误：

// context.tsx中添加工具函数
export const getUserStatusFromStorage = (): UserStatus => {
  const saved = localStorage.getItem('userStatus');
  if (saved && Object.values(UserStatus).includes(saved as UserStatus)) {
    return saved as UserStatus;
  }
  return UserStatus.LoggedOff;
};

export const saveUserStatusToStorage = (status: UserStatus) => {
  localStorage.setItem('userStatus', status);
};

修改app.tsx中的使用方式：

const [userStatus, setUserStatus] = useState<UserStatus>(getUserStatusFromStorage);

useEffect(() => {
  saveUserStatusToStorage(userStatus);
}, [userStatus]);

3. 登录页面逻辑保持不变 #

在loginPage.tsx中登录成功后，直接调用原有的状态更新方法即可，状态会自动同步到本地存储：

import { useUserStatus } from './context';

function LoginPage() {
  const { setUserStatus } = useUserStatus();

  const handleLogin = async () => {
    // 执行登录请求
    await loginApi(credentials);
    // 更新登录状态
    setUserStatus(UserStatus.LoggedIn);
    // 跳转至根路径
    navigate('/');
  };

  return <div>{/* 登录表单组件 */}</div>;
}

额外说明 #

• 若需要关闭浏览器后清除登录状态，替换localStorage为sessionStorage即可；
• 敏感信息（如用户令牌）不要存在本地存储，建议使用HttpOnly Cookie，仅在本地存储登录状态标识；
• 大型项目可考虑使用Zustand、Jotai等状态管理库，它们内置持久化插件，实现更简洁。

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