React.js开发围棋游戏时历史棋盘状态遭突变覆写的问题

我用React开发围棋游戏，采用二维数组存储棋盘状态，更新最新状态没问题，但所有历史记录里的过往棋盘状态都会被修改成最新状态，导致跳转历史时棋盘没有变化。

问题根源 #

JavaScript中数组属于引用类型，你在handlePlay里直接将nextSquares添加到历史数组时，只是把同一个数组的引用存了进去。后续修改这个数组时，所有指向它的历史项都会同步变化——因为它们本质上是同一个数组。

解决方法 #

每次添加新状态到历史记录前，对棋盘数组做深拷贝，让每个历史状态都是独立的二维数组，互相不影响。

修改handlePlay函数，对nextSquares进行深拷贝：

function handlePlay(nextSquares) {
  // 深拷贝二维数组：遍历每一行并拷贝，生成全新的棋盘数组
  const newBoard = nextSquares.map(row => [...row]);
  const nextHistory = [...history.slice(), newBoard];
  setHistory(nextHistory);
  setCurrentMove(nextHistory.length - 1);
}

也可以在生成nextSquares的环节（比如落子计算新棋盘时）直接创建新数组，从源头避免引用问题：

// 示例：落子时生成新棋盘的逻辑
function makeMove(x, y, player) {
  // 先拷贝当前棋盘，生成新数组
  const newSquares = currentBoard.map(row => [...row]);
  // 修改新棋盘的对应位置
  newSquares[x][y] = player;
  // 传递新棋盘给handlePlay
  handlePlay(newSquares);
}

验证效果 #

修改后，每个历史记录项都是独立的二维数组，后续修改新状态不会影响之前的历史数据，调用jumpTo跳转时，棋盘就能正确显示对应历史状态了。

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