反应：状态对象中缺少属性

因此，我开始学习React，并做了一些基础知识（计数器，待办事项列表）后，我决定做一些更具挑战性的事情。带有棋子的棋盘，可以通过单击来移动。我的主要组成部分是Chessboard。然后渲染Tiles可能包含的渲染Piece。有关游戏的信息以Chessboard's状态存储，如下所示：

interface State {
  board: Record<string, pieceInterface>;
  isPieceMoving: boolean;
  movingPieceId: string;
}

我用Chessboard's方法来处理移动的部分onTileClick(id: string)。它Tile作为道具传递给a ，并在单击图块时使用图块ID对其进行调用（例如“ a4”，“ f6”，“ h3”）。它具有以下逻辑。游戏可以处于两种状态：我当前正在移动一个棋子，或者我目前什么都不做，然后通过单击它开始移动一个棋子。当我开始移动作品时，我将其ID（或者更确切地说是女巫架子上的瓷砖的ID）存储在中state.movingPieceId。当我尝试放置它时，我会检查图块是否为空，然后进行相应的更改state.board。这是我的代码：

onTileClick = (id: string): void => {
  if (!this.state.isPieceMoving) {
    if (this.state.board[id]) {
      this.setState({
        isPieceMoving: true,
        movingPieceId: id,
      });
    }
  } else {
    if (!this.state.board[id]) {
      this.setState((state) => {
        let board: Record<string, pieceInterface> = state.board;
        const piece: pieceInterface = board[state.movingPieceId];

        delete board[state.movingPieceId];
        board[id] = piece;

        // console.log(board[id]);
        // console.lob(board);

        const isPieceMoving: boolean = false;
        const movingPieceId: string = "";

        return { board, isPieceMoving, movingPieceId };
      });
    }
  }
};

第一部分工作正常。但是在第二个中，有一些我找不到的错误。当我取消注释此控制台日志时，输出看起来像这样（我想将片段从“ a2”移动到“ a3”）：

Object { "My piece representation" }
Object {
    a1: { "My piece representation" },
    a3: undefined,
    a7: { "My piece representation" },
    ...
}

我的代码正确地从“ a2”（板上没有“ a2”属性）“获取”了单击的片段，但显然并没有将其放回原处。即使打印时board[id]给出正确的对象！我将日志记录console.log(board)向上移动，以查看发生错误的位置。即使我将它直接放在其他位置，它仍然说“ a3”是undefined。

我花了几个小时试图了解正在发生的事情。我试图在控制台中模拟这段代码片段，但它始终可以正常工作！有人可以向我解释我在做什么错吗？这是我还没有学过的一些怪异的React的setState机制吗？还是我不知道的一些基本的javascript内容？我们会提供任何帮助，因为我被困在这里无法继续前进并做其他任何事情。

编辑＃1

好的。所以，我是能够解决受到此问题的深拷贝 state.board到board（由@Linda Paiste的评论inspiredy）。我只是使用了简单的JSON stringify / parse hack：

let board: Record<string, pieceInterface> = JSON.parse(JSON.stringify(state.board));

这修复了该错误，但我不知道为什么。我将继续公开这个问题，所以也许有人会向我解释我先前的代码出了什么问题以及为什么出了问题。

编辑＃2

好的。感谢@Linda的解释和阅读文档，我终于了解了我做错了什么。琳达在下面的回答（被接受的答案）中做了详细的解释。非常感谢大家！