React数组状态更新异常：重赛按钮无法重置井字棋棋盘状态

核心原因是React的useState依赖浅比较判断状态是否更新：只有当传入的新状态与当前状态的引用不同时，才会触发组件重渲染。

1. 直接传入initialGameBoard无效的原因 #

如果你的游戏逻辑中，没有通过创建新数组的方式更新状态，而是直接修改gameBoardState的内部元素（比如gameBoardState[row][col] = 'X'），那么gameBoardState的引用会始终和initialGameBoard保持一致。此时调用setGameBoardState(initialGameBoard)，新旧状态的引用完全相同，React会判定状态没有发生变化，因此不会触发重渲染。

2. 浅拷贝initialGameBoard无效的原因 #

initialGameBoard是二维数组，浅拷贝（比如[...initialGameBoard]或initialGameBoard.slice()）只会复制外层数组的引用，内层的三个子数组仍然和initialGameBoard的子数组共用同一个引用。

• 如果之前你已经直接修改过initialGameBoard内部的子数组元素（因为gameBoardState和它引用相同），那么浅拷贝后的数组内部元素并不是初始的全null状态；
• 更关键的是，若当前gameBoardState的内层子数组引用和浅拷贝后的内层子数组引用一致，React浅比较时仍会认为状态无变化，不会触发重渲染。

3. 新建全null数组有效的原因 #

在重赛函数内新建的[[null,null,null],[null,null,null],[null,null,null]]是一个完全独立的全新数组，它的外层数组和内层子数组的引用都与当前gameBoardState不同。React通过浅比较发现引用不一致，判定状态发生了变化，因此会触发组件重渲染，页面也会回到初始状态。

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