React - 遍历嵌套数组并检查数组中索引的值答案

【问题标题】：React - Iterate through nested array and check values of indexes in arrayReact - 遍历嵌套数组并检查数组中索引的值
【发布时间】：2018-09-29 02:27:17
【问题描述】：

我正在学习 React 并致力于 Conway 的 Game of Life 项目。该项目已基本完成，但我在实现游戏逻辑时遇到了麻烦。我有一个代表游戏板的二维数组。二维数组中的每个索引代表棋盘中的一个正方形。我设置了它，以便功能组件处理板的显示以及在生命游戏的意义上哪些方块是“活的”。在我的 App.js 中，我有一个 componentDidMount 函数，它创建一个充满随机“活动”方块的新棋盘，它还调用一个 timer 函数，每隔几秒创建一个新棋盘。

我正在尝试使用componentDidUpdate 来在每次棋盘更改时检查棋盘并应用生命游戏规则：

任何活细胞少于两个的活细胞都会死亡，就像人口不足一样。

任何有两三个活邻居的活细胞都可以活到下一代。

任何有超过三个活邻居的活细胞都会死亡，就像人口过剩一样。

任何只有三个活邻居的死细胞都会变成活细胞，就像通过繁殖一样。

我的逻辑是当componentDidUpdate 运行时，我将循环遍历二维数组（游戏板）并检查相邻的方块以查看它们是否被填充。然后，应用游戏规则，并确定该特定方格是否存在、死亡或复制。然后在检查每个方块并确定它应该生还是死之后，我将使用新游戏板的值更新状态。然后timer 再次运行，创建下一轮，componentDidUpdate 将再次评估板的下一次更改。

这不起作用。这是componentDidUpdate 的代码。我的方法有什么问题？：

// Should apply Game of Life rules and decide with squares are alive/dead every time the board is updated
  componentDidUpdate = (prevProps, prevState) => {
    //console.log('PrevState is : ' + prevProps, prevState);
    const oldBoard = this.state.board;
    const newBoard = this.state.nextBoard;

    console.log('oldBoard ' + oldBoard);

/*    // Checks that board has changed and prevents infinite loop in componentDidUpdate
      for(let x = 0; x < this.state.boardHeight; x++) {
        for(let y = 0; y < this.state.boardWidth; y++) {
          let neighborCount = 0;
          // Game of Life logic pertaining to squares being alive/dead
          neighborCount += oldBoard[x - 1][y - 1];
          neighborCount += oldBoard[x][y - 1];
          neighborCount += oldBoard[x + 1][y - 1];
          neighborCount += oldBoard[x - 1][y];
          neighborCount += oldBoard[x + 1][y];
          neighborCount += oldBoard[x - 1][y + 1];
          neighborCount += oldBoard[x][y + 1];
          neighborCount += oldBoard[x + 1][y + 1];

          // If square has 2 live neighbors it stays alive
          if(neighborCount == 2) {
            newBoard[x][y] = oldBoard[x][y];
          }
          // If square has exactly 3 neighbors a new life square is born
          else if (neighborCount == 3) {
            newBoard[x][y] = 1;
          }
          // Is square has more than 3 live neighbors it dies
          else if(neighborCount > 3){
            newBoard[x][y] = 0;
          }
        }
      }

      if(newBoard !== oldBoard) {
        // after applying rules set the nextBoard
        this.setState({ board: newBoard });
      }
    */

  }

在CodeSandbox 上查看整个 App.js 可能会更容易。我认为我的逻辑是正确的，但也许我循环和评估数组值的方式不正确，或者我对 componentDidUpdate 的使用不正确。

【问题讨论】：

您的console.log 看起来正确吗？
console.logging oldBoard 值显示正确。它每 2 秒更新一次并显示一个随机 1 和 0 的数组。

标签： javascript reactjs multidimensional-array nested iteration

【解决方案1】：

我认为您的问题是您正在与 newBoard 进行比较，这是您从未设置过的。我相信您可以完全从状态中删除 newBoard 并开始检查

const oldBoard = prevState.board;
const newBoard = this.state.board;

在您的 componentDidUpdate 函数中。

【讨论】：