React useContext同一组件更新后无法获取最新值问题

问题原因 #

React中所有状态更新（包括通过Context传递的setContext1）都是异步批量更新机制。调用setContext1后，React不会立刻修改当前组件内的context1变量引用——当前函数执行栈里的context1还是更新前的旧值，只有当组件重新渲染完成后，才能拿到更新后的新值。这就是为什么你在setContext1后立即console.log输出的还是旧值。

不使用组件内部state的解决方案 #

不需要额外维护组件内部的state，通过以下两种方式就能在Component2中获取到更新后的上下文值：

1. 用useEffect监听上下文值变化

通过useEffect监听context1的变化，当值更新时自动执行逻辑，这是最符合React数据流的方式：

const Component2 = () => {
  const { context1, setContext1 } = useContext(AppContext);

  useEffect(() => {
    console.log('Comp2 useEffect');
  }, []);

  // 监听context1的变化，值更新时触发
  useEffect(() => {
    console.log('Component2 中 context1 已更新为:', context1);
  }, [context1]); // 依赖项设置为context1

  const buttonHandler = () => {
    setContext1(() => 'updated text');
  };

  return (
    <>
      <button onClick={buttonHandler}>Update name</button>
      <div>Component2 当前上下文值: {context1}</div>
    </>
  );
};

export default Component2;

2. 在setContext1的函数式更新中处理新值

如果你的新值是已知的，或者依赖旧值，可以直接在setContext1的函数式回调里处理相关逻辑：

const buttonHandler = () => {
  const newValue = 'updated text';
  setContext1((prevValue) => {
    // 这里可以直接使用newValue，或者基于prevValue计算新值
    console.log('即将把上下文值从', prevValue, '更新为', newValue);
    // 在这里执行需要用到新值的逻辑
    return newValue;
  });
};

总结 #

React的异步状态更新机制是核心原因，不需要额外添加组件内部state，通过useEffect监听上下文变化，或者在函数式更新回调中处理新值逻辑，就能满足同一组件内读写上下文值的需求。

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