React井字棋应用事件处理器内重渲染导致日志不一致问题排查

问题原因 #

1. React状态更新的异步性：React的setState（包括函数式组件的setSquares）是异步批量处理的，调用状态更新方法后，不会立刻修改组件内的状态值，而是将更新请求加入队列，当前函数执行完毕后才会批量处理更新并触发重渲染。如果其中一处日志是在setSquares调用后立刻打印，拿到的是更新前的旧状态快照；另一处是在组件重渲染后打印，拿到的是新状态，自然输出不一致。
2. 引用类型的控制台特性：如果直接修改了squares数组（比如squares[i] = 'X'）再调用setSquares，由于数组是引用类型，控制台会显示该引用的最新值，但打印那一刻的状态快照其实是旧的，导致日志看起来“事后更新”，和另一处的真实快照输出不一致。

解决方法 #

1. 坚持状态不可变更新 #

永远不要直接修改状态数组/对象，必须创建新副本再更新：

// 错误写法
squares[i] = 'X';
setSquares(squares);

// 正确写法
const newSquares = [...squares];
newSquares[i] = 'X';
setSquares(newSquares);

这种方式能保证状态的快照和最终更新值完全一致，避免引用类型带来的控制台日志“回溯”问题。

2. 在正确时机打印状态 #

• 如果要打印更新后的状态，不要在setSquares调用后立刻打印，而是在组件函数体顶部打印（重渲染后会自动拿到最新状态）。
• 或者用useEffect监听squares的变化，确保只在状态更新完成后打印：

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

3. 打印状态的快照副本（调试用） #

如果只是为了查看打印那一刻的真实状态，可打印状态的深拷贝，避免控制台引用更新的干扰：

console.log(JSON.parse(JSON.stringify(squares)));

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