React中useState的set方法未更新context值问题求助

你的代码存在三个核心问题，导致Context始终保持默认值：

1. 自定义Hook的setContext存在闭包陷阱 #

你在useStateContext中定义的setContext函数依赖了当前渲染周期的context值，形成闭包。当组件重新渲染时，这个函数不会自动更新，导致合并状态时使用的是旧的context，无法正确更新最新状态。

修复代码：

export default function useStateContext() {
    const { context, setContext } = useContext(stateContext);
    return {
        context,
        setContext: obj => {
            // 使用函数式更新，确保获取最新的上下文状态
            setContext(prevContext => ({ ...prevContext, ...obj }));
        }
    };
}

2. 登录后跳转时机过早 #

你的navigate('/planner')写在异步请求的外部，会在API请求还未完成、Context还未更新时就跳转页面。此时目标页面渲染时获取的还是旧的Context值，后续Context更新也无法触发目标页面及时重新渲染。

修复登录函数：

const login = e => {
    e.preventDefault();
    if (validate()) {
        createAPIEndpoint(ENDPOINTS.members).getByTwo(values.email, values.password)
            .then(res => res.json())
            .then(data => {
                setContext({ memberId: data.id, firstname: data.firstName });
                console.log(data.id); // 返回正确值
                // 确保Context更新后再跳转
                navigate('/planner');
            })
            .catch(err => console.log(err))
    }
};

3. 检查ContextProvider的包裹范围 #

确保ContextProvider包裹了所有需要访问该Context的组件，包括路由组件。如果目标页面（/planner）不在ContextProvider的范围内，它永远只能获取到Context的默认值。

正确的包裹示例：

// main.jsx 或 App.js
import { ContextProvider } from './your-context-file-path';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import LoginPage from './LoginPage';
import PlannerPage from './PlannerPage';

function App() {
  return (
    <ContextProvider>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<LoginPage />} />
          <Route path="/planner" element={<PlannerPage />} />
        </Routes>
      </BrowserRouter>
    </ContextProvider>
  );
}

额外优化：增加localStorage读取的容错处理 #

为了避免localStorage读取或解析失败导致的异常，给getFreshContext添加try-catch：

const getFreshContext = () => {
    try {
        const storedContext = localStorage.getItem('context');
        if (!storedContext) {
            const defaultContext = { memberId: 0, firstname: "" };
            localStorage.setItem('context', JSON.stringify(defaultContext));
            return defaultContext;
        }
        return JSON.parse(storedContext);
    } catch (error) {
        console.error('加载本地上下文失败:', error);
        const defaultContext = { memberId: 0, firstname: "" };
        localStorage.setItem('context', JSON.stringify(defaultContext));
        return defaultContext;
    }
};

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