React登录跳转后丢失Context访问权限的问题求助

云原生阿岚

2026-8-16

解决方法

1. 确保Farmers组件正确调用Context

在Farmers组件中必须通过useContext钩子获取上下文实例，不能直接使用Context对象：

// Farmers.jsx
import { useContext } from 'react';
import AuthContext from './AuthContext'; // 确认路径正确
import usersAndProductsContext from './usersAndProductsContext'; // 确认路径正确

const Farmers = () => {
  const authCtx = useContext(AuthContext);
  const usersProductsCtx = useContext(usersAndProductsContext);

  // 测试是否能获取到数据
  console.log('当前登录用户ID:', authCtx.currentLoggedUserId);
  console.log('用户列表:', usersProductsCtx.usersVal);

  return <div>Farmers页面内容</div>;
};

export default Farmers;

2. 修正AuthContext Provider的value值错误

你的App组件中AuthContext的Provider存在两处问题：

混入了未在初始Context定义的currentUserId键，应该移除
硬编码isLoggedIn: false，应该使用App组件中维护的状态变量，同时补上初始Context中定义的isLoggedInEditVal方法

修正后的Provider代码：

// App组件中，假设你已定义isLoggedIn和isLoggedInEditVal状态/方法
<AuthContext.Provider
  value={{
    isLoggedIn: isLoggedIn, // 替换为你的实际状态变量
    isLoggedInEditVal: isLoggedInEditVal, // 补上初始Context里的方法
    currentLoggedUserId: currentLoggedUserId,
    edit_currentLoggedUserId: edit_currentLoggedUserId,
  }}>
  <Routes>
    {/* 路由配置 */}
  </Routes>
</AuthContext.Provider>

3. 移除登录逻辑中的不必要延迟

setTimeout会导致跳转后Context数据尚未更新，直接同步调用更新方法即可：

// Login组件的handleSubmit
if (res != undefined && res.password === data.get('password')) {
    usersAndItemsCtx.toggle_pressed_login_flag(true); 
    authCtx.edit_currentLoggedUserId(res.id); // 去掉setTimeout
    navigate('/farmers'); 
}