Question

我正在学习React，并从事Conway的“生活游戏”项目。该项目大部分已经完成，但是我在实现游戏逻辑时遇到了麻烦。我有一个代表游戏板的2D阵列。 2D数组中的每个索引代表板上的一个正方形。我已经进行了设置，以便功能组件可以处理电路板的显示，并且在生活游戏的意义上哪些正方形是“有效的”。在我的App.js中，我有一个componentDidMount函数，该函数创建了一个填充有随机“活动”正方形的新板，还调用了timer函数，该函数每两秒钟创建一个新板。

每次董事会更换时，我都试图使用componentDidUpdate来检查董事会，并应用生命游戏规则：

任何少于两个活体邻居的活细胞都会死亡，就像是人口不足。

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

具有三个以上活邻居的任何活细胞都会死亡，好像是人口过多。

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

我的逻辑是componentDidUpdate运行时，我将遍历2D数组（游戏板）并检查相邻的正方形以查看是否已填充它们。然后，应用游戏规则，并确定该特定方块是生存还是死亡或复制。然后，在检查每个方块并确定它应该存活还是死亡之后，我将使用新游戏板的值更新状态。然后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的使用不正确。

Answer 1

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

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

在您的componentDidUpdate函数中。

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

1 个答案: