React Context对象更新异常：点击单元格赋值后打印仍为初始旧值

1. React状态更新为异步批处理机制 #

不管是useState返回的更新函数还是Context中封装的状态更新函数，调用后都不会立即修改当前作用域下的状态变量，而是会将更新任务推入React的异步调度队列，等待当前同步代码全部执行完成后，才会触发组件重渲染、生成新的状态值。你在setData之后立即打印的data，仍然是当前渲染周期下的旧值。

2. 闭包快照特性 #

当前onCellClick函数是在组件某次渲染时生成的，它内部引用的data是这次渲染对应的状态快照，调用setData不会修改当前函数作用域内已经捕获的旧状态值，只有组件完成重渲染后，新生成的函数才会拿到更新后的状态。

额外问题：现有useEffect存在死循环风险 #

你将data.attr1作为useEffect的依赖项，同时在useEffect内部调用setData修改data.attr1，只要props.someThing为真，就会无限触发effect执行、更新状态、再次触发effect的循环，会导致性能问题甚至页面崩溃。

• 如果你需要使用更新后的状态执行后续逻辑（比如你代码中的跳转操作），可以单独声明useEffect监听data变化，重渲染后再执行对应逻辑：

useEffect(() => {
  // 匹配点击后的状态特征再执行跳转
  if (data?.newAttrPostClick1 === '3') {
    history.push("/SomePage")
  }
}, [data, history])

• 如果你只是临时需要用到新传入的状态值，可以先将新值存为临时变量，直接操作这个变量而非读取旧状态：

const onCellClick = (e) => {
  console.log(e);
  if (data.attr1 === '1') {
    const newData = {
      newAttrPostClick1: '3',
      newAttrPostClick4: '4'
    }
    setData(newData);
    // 直接使用临时变量即可拿到最新值
    console.log("data : " + JSON.stringify(newData));
    // 如果跳转不需要依赖状态落地，也可直接在此处执行
    history.push("/SomePage");
  }
}

• 修复useEffect的死循环问题：将依赖项中的data.attr1替换为实际的触发条件，如果你只需要组件初始加载时执行一次初始化赋值，将依赖改为[props.someThing]即可。

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