ReactJS Context共享问题求助：登录状态无法跨组件同步

核心问题是你创建了两个独立的Context实例，导致状态各自孤立。要实现共享，只需要统一成单一Context+全局Provider的模式，具体步骤如下：

1. 创建唯一的Auth Context #

新建一个单独的文件（比如AuthContext.js），在这里创建唯一的Context和对应的Provider、自定义钩子：

import { createContext, useContext, useState } from 'react';

// 创建唯一的Auth Context
const AuthContext = createContext();

// 全局状态提供者组件
export function AuthProvider({ children }) {
  // 存储登录用户状态
  const [user, setUser] = useState(null);

  // 登录方法
  const login = (userData) => {
    setUser(userData);
  };

  // 登出方法
  const logout = () => {
    setUser(null);
  };

  // 把状态和方法通过Provider传递给子组件
  return (
    <AuthContext.Provider value={{ user, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
}

// 自定义钩子，简化Context的消费
export function useAuth() {
  return useContext(AuthContext);
}

2. 在应用根节点包裹Provider #

找到你的应用根组件（比如App.js），把所有需要共享登录状态的组件都包裹在AuthProvider里，确保它们都在同一个Context作用域下：

import { AuthProvider } from './AuthContext';
import HomePage from './HomePage';
import DropdownMenu from './DropdownMenu';

function App() {
  return (
    <AuthProvider>
      {/* 所有需要访问登录状态的组件都放这里 */}
      <HomePage />
      <DropdownMenu />
    </AuthProvider>
  );
}

export default App;

3. 在组件中统一使用useAuth钩子 #

不管是主页的登录入口，还是下拉菜单的登录/登出控件，都用同一个useAuth钩子获取状态和方法，替换原来各自的Context消费逻辑：

主页组件示例 #

import { useAuth } from './AuthContext';

function HomePage() {
  const { user, login, logout } = useAuth();

  return (
    <div>
      {user ? (
        <button onClick={logout}>登出</button>
      ) : (
        <button onClick={() => login({ name: '登录用户' })}>登录</button>
      )}
    </div>
  );
}

下拉菜单组件示例 #

import { useAuth } from './AuthContext';

function DropdownMenu() {
  const { user, login, logout } = useAuth();

  return (
    <div>
      {user ? (
        <span>欢迎 {user.name} <button onClick={logout}>登出</button></span>
      ) : (
        <button onClick={() => login({ name: '登录用户' })}>登录</button>
      )}
    </div>
  );
}

4. 清理冗余代码 #

删除你之前创建的两个独立Context文件或代码，避免后续混淆。

这样修改后，所有组件都会共享同一个登录状态，操作任意一个登录/登出按钮，其他组件的状态都会自动同步更新。

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