React AuthContext赋值后Admin组件读取user值为空问题

你遇到的问题来自三个核心问题：

• 将存储认证信息的userChosenByAdmin定义为Context Provider组件外部的普通变量，不属于React可追踪的响应式状态。修改变量不会触发组件重渲染，Context的下发值不会更新，所有消费组件自然拿不到修改后的新值。
• React状态更新为异步批处理逻辑，就算使用正确的响应式状态，在调用setter方法的当前同步执行栈中读取状态，拿到的依然是当前渲染周期的旧值，不可能立刻拿到刚设置的新值。
• 语法错误：你写的Admin组件中，return返回JSX的逻辑写在了getUserInfo事件处理函数内部，组件本身没有合法返回值，运行会直接报错。

1. 修正AuthContext实现 #

将普通变量替换为Provider组件内部用useState声明的响应式状态，状态更新时会自动触发Provider重渲染，把最新值下发给所有消费组件：

import React, { useState } from 'react';

const AuthContext = React.createContext({
  setUserChosenByAdmin: () => {},
  userChosenByAdmin: '',
});

export const AuthContextProvider = (props) => {
  // 响应式状态声明在Provider组件内部
  const [userChosenByAdmin, setUserChosenByAdmin] = useState('');

  const contextValue = {
    setUserChosenByAdmin,
    userChosenByAdmin,
  };

  return (
    <AuthContext.Provider value={contextValue}>
      {props.children}
    </AuthContext.Provider>
  );
};
export default AuthContext;

2. 修正Admin组件实现 #

把JSX返回逻辑挪到组件根层级，不要在setter调用后同步读取Context值，组件重渲染后会自动获取最新值，需要监听值变化可以用useEffect：

import { useContext, useEffect } from 'react';
import AuthContext from '../store/auth-context';

const Admin = () => {
  const authCtx = useContext(AuthContext);

  const getUserInfo = (e) => {
    // innerText是同步DOM属性，不需要加await
    const chosenUser = e.target.closest('h4')?.innerText || '';
    authCtx.setUserChosenByAdmin(chosenUser);
    // 此处同步打印authCtx.userChosenByAdmin永远拿到旧值，属于React正常机制
  };

  // 状态更新触发重渲染后，这里会拿到最新值，需要执行副作用可以写在useEffect里
  useEffect(() => {
    console.log('当前选中用户：', authCtx.userChosenByAdmin);
  }, [authCtx.userChosenByAdmin]);

  return <button onClick={getUserInfo}>get user info</button>;
};

export default Admin;

React的渲染触发机制只认内部声明的响应式状态（useState/useReducer生成的状态），组件外部的普通变量、组件内部未被状态接管的普通变量修改，都不会被React感知，也不会触发视图或Context值更新。另外状态更新不是同步生效的，不要在调用setter的同步代码里立刻读取新状态。

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