React useState管理的数组push值后打印始终为空问题求助

问题原因 #

React的状态更新是异步批量处理的，你在调用setBetHistory之后立刻打印当前作用域下的betHistory，拿到的仍然是本次渲染周期对应的旧状态值，状态更新要等本次同步代码执行完毕，触发组件重新渲染后才会生效。

每个组件渲染周期都会生成独立的快照，当前周期内的所有状态、函数取值都是固定的，setXXX只会提交更新请求，不会修改当前周期的状态值。

验证方案 #

如果要查看更新后的状态，可以用以下两种方式：

• 把打印逻辑放到组件函数的最外层，每次组件重新渲染时就会打印最新的betHistory
• 通过useEffect监听betHistory的变化，触发后打印：

useEffect(() => {
  console.log('更新后的betHistory：', betHistory);
}, [betHistory]);

额外说明 #

你当前用函数式更新的写法setBetHistory(betHistory => [...betHistory, betCount.toString()])是完全正确的，不需要调整，只是打印的时机不对才会出现始终拿到旧值的情况。

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