如何在子组件修改useContext值，让其他子组件获取更新后的值？

为啥之前的方法不生效？ #

你直接修改Context的值没用——React Context本身不会触发组件重渲染。必须结合useState或者useReducer来维护状态，把状态值 + 状态更新方法一起塞进Context里，子组件通过调用更新方法修改状态，才能让所有用到这个Context的组件同步更新。

完整代码示例 #

1. App.jsx：创建Context并管理用户状态 #

import { createContext, useState } from 'react';
import Login from './Login';
import Dashboard from './Dashboard';

// 创建Context，默认值给个空架子避免报错
export const UserContext = createContext({
  user: null,
  setUser: () => {}
});

function App() {
  // 用useState存用户状态
  const [user, setUser] = useState(null);

  return (
    // 把状态和更新方法一起传给Provider
    <UserContext.Provider value={{ user, setUser }}>
      <div className="App">
        <Login />
        <Dashboard />
      </div>
    </UserContext.Provider>
  );
}

export default App;

2. Login.jsx：模拟登录，更新用户状态 #

import { useContext } from 'react';
import { UserContext } from './App';

function Login() {
  // 从Context里拿更新方法
  const { setUser } = useContext(UserContext);

  const handleLogin = () => {
    // 模拟接口返回的用户数据
    const mockUser = {
      id: 1,
      username: 'lazlomeli',
      email: 'lazlomeli@example.com'
    };
    // 调用setUser更新状态
    setUser(mockUser);
  };

  return (
    <div>
      <h2>登录页</h2>
      <button onClick={handleLogin}>点击模拟登录</button>
    </div>
  );
}

export default Login;

3. Dashboard.jsx：展示登录后的用户信息 #

import { useContext } from 'react';
import { UserContext } from './App';

function Dashboard() {
  // 从Context里拿最新的用户状态
  const { user } = useContext(UserContext);

  if (!user) {
    return <div>请先登录哦</div>;
  }

  return (
    <div>
      <h2>用户仪表盘</h2>
      <p>用户名：{user.username}</p>
      <p>邮箱：{user.email}</p>
    </div>
  );
}

export default Dashboard;

重点提醒 #

• 别直接改Context的值：必须通过useState的更新方法来改，这样React才会触发重渲染，让所有消费组件拿到新值。
• Context默认值的作用：只有当组件没被Provider包裹时才会用默认值，这里给默认值加个空的setUser函数，是为了避免子组件调用时出现“函数未定义”的错误。

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