React-使用componentDidUpdate根据从另一个函数传递的数据更新状态

我正在学习React,并在开发一款JohnConway的游戏应用程序。我在state/constructor中定义了一个2D数组,它创建了一个正方形的游戏板。我有一个函数叫做 isSquareAlive selectBoardSize 它允许用户点击一个按钮并调整电路板的大小。

当应用程序挂载时,我会生成一个随机的棋盘,其中有些方块被设置为“活动”,有些则不是。我在里面处理这个 componentDidMount :

  componentDidMount = () => {
    const data = this.state.board;
    // Creates random decimal number between 0 and 1
    const startingBoard = data.map(a => a.map(Math.random));
    // Rounds decimal numbers to either 0 or 1 so the grid can display whether the cell is alive or dead
    const rounded = startingBoard.map(a => a.map(Math.round));

    this.setState({
       board: rounded
    });
  }

这个很好用。如果用户试图通过 选择BoardSize 选择BoardSize :

  // Allows user to click button and change size of game board
  selectBoardSize = (width, height) => {
    this.setState({
      boardHeight: height,
      boardWidth: width,
      board: Array(this.state.boardHeight).fill(0).map(_ =>
              Array(this.state.boardWidth).fill(0))
    });
      {/*this.onChangeBoardSize(width, height);*/}
  }

当用户改变我试图使用的电路板尺寸时 componentDidUpdate 获取新的电路板尺寸并用随机的“活动”单元填充该电路板尺寸,就像我最初使用 组件安装 . 这就是我遇到的困难。

组件更新

  // Attempts to fill board with random alive squares when user resizes the size of the board via onClick/selectBoardSize()
  componentDidUpdate = (prevProps, prevState) => {
    console.log('PrevState is : ' + prevProps, prevState);

    // Attempts to update board height and width and then populate board with random "alive" squares
    if(this.state.boardWidth !== prevState.boardWidth) {
      if(this.state.boardHeight !== prevState.boardHeight) {
        // Console.log runs, if statements equate to true when user resizes board
        console.log('Nested if statements in componentDidUpdate triggered');

        const boardWidth = this.state.boardWidth;
        const boardHeight = this.state.boardHeight;
        const data = this.state.board;
        // Creates random decimal number between 0 and 1
        const startingBoard = data.map(a => a.map(Math.random));
        // Rounds decimal numbers to either 0 or 1 so the grid can display whether the cell is alive or dead
        const rounded = startingBoard.map(a => a.map(Math.round));

        this.setState({
          boardWidth: boardWidth,
          boardHeight: boardHeight,
          board: rounded
        })
      }
    }
  }

当用户点击按钮调整尺寸时,电路板成功地改变了尺寸,但它不会像应该的那样生成随机的“活动”正方形。它只是改变了板的高度和宽度,但板是空的。

我怎么用 组件更新 当游戏板调整大小时,用随机的“活动”单元格填充游戏板(类似于最初安装时所做的操作,但当游戏板改变大小时大小会适当调整)。是 组件更新 正确的方法?这是setState异步的问题吗?

我肯定我想得太多了。

你可以在网上查到密码 codesandbox