Javascript 当this.state=X时，如何在React组件中运行while循环

基本上我有一门课叫游戏。它的状态由一个二维数组方块和一个变量组成，该变量只在“成功”和“危险”之间更改按钮的颜色。每当我按下按钮，并将状态中的变量切换为“危险”时，我希望此.startName（）中的循环重复，直到我按下按钮并将其更改回。在startGame（）中循环的每次迭代中，它都会更改方块并调用this.setState来更新方块。我在屏幕上渲染了正方形，我希望看到每个循环上都有一个重新渲染器，并且屏幕上的正方形每次都在变化。目前，当我按下按钮开始循环时，什么也没有发生；当我再次按下它结束它时也是这样。但是如果我删除startGame（）中的循环，代码将运行一次，并且它实际上执行了它应该执行的操作。问题是，我希望它继续这样做（而this.state.variant=='danger'），直到我按下按钮停止它。我做错了什么？我该如何修复它

import React from 'react';
import Grid from './Grid';
import NavigationBar from './NavigationBar';
import Legend from './Legend';

class Game extends React.Component {
  constructor(props) {
    super(props);

    // initialize 2d array to store the state of the game
    let abc = Array(30);
    for(var i=0; i < abc.length; i++) {
      abc[i] = Array(79);
      for(var j=0; j < abc[i].length; j++) {
        abc[i][j] = 0;
      }
    }
    this.state = {
      squares: abc,
      start: 'Start Simulation!',
      variant: 'success',
    }
  }

  // change value at squares[x][y]
  handleClick(x, y) {
    const squares = this.state.squares.slice();
    squares[x][y] = squares[x][y] === 0 ? 1 : 0;
    this.setState({squares: squares});
  }

  handleClickNav(command) {
    if(command === 'clear') {
      // clears the grid of alive cells
      const temp = this.state.squares;
      for(var i=0; i < 30; i++) {
        for(var j=0; j < 79; j++) {
          temp[i][j] = 0;
        }
      }
      this.setState({sqares: temp});
    }
    // pressing the randomize button makes it so that each cell has a 1/10 probability to be alive, 1/10 so that there isn't a lot of clutter
    if(command === 'randomize') {
      const values = [0, 0, 0, 0, 0, 0, 0, 0, 0, 1];
      const temp = this.state.squares;
      for(var i=0; i < 30; i++) {
        for(var j=0; j < 79; j++) {
          temp[i][j] = values[Math.floor(Math.random() * 10)]
        }
      }
      this.setState({squares: temp});
    }
    // starts the game
    if(command === 'start') {
      // change the start button to a stop button and vice versa
      if(this.state.variant === 'success') {
        this.setState({
          start: 'Stop Simulation',
          variant: 'danger',
        })
        this.startGame();
      }
      else {
        this.setState({
          start: 'Start Simulation!',
          variant: 'success',
        })
      }
    }


  }

  startGame() {
    while(this.state.variant === 'danger') {
      let neighbors = Array(30);
      for(var i = 0; i < neighbors.length; i++) {
        neighbors[i] = Array(79);
        for(var j = 0; j < neighbors[i].length; j++) {
          neighbors[i][j] = 0;
        }
      }

      for(var i = 0; i < 30; i++) {
        for(var j = 0; j < 79; j++) {
          // do the corner first
          if(i === 0 && j === 0) {
            neighbors[i][j] = this.state.squares[i+1][j] + this.state.squares[i][j+1] + this.state.squares[i+1][j+1];
          }
          else if(i === 0 && j === neighbors[0].length - 1) {
            neighbors[i][j] = this.state.squares[i][j-1] + this.state.squares[i+1][j-1] + this.state.squares[i+1][j];
          }
          else if(i === neighbors.length - 1 && j === 0) {
            neighbors[i][j] = this.state.squares[i-1][j] + this.state.squares[i-1][j+1] + this.state.squares[i][j+1];
          }
          else if(i === neighbors.length - 1 && j === neighbors[0].length - 1) {
            neighbors[i][j] = this.state.squares[i-1][j] + this.state.squares[i-1][j-1] + this.state.squares[i][j-1];
          }
          // now the edges
          else if(i === 0) {
            neighbors[i][j] = this.state.squares[i][j-1] + this.state.squares[i+1][j-1] + this.state.squares[i+1][j] + this.state.squares[i+1][j+1] + this.state.squares[i][j+1];
          }
          else if(i === neighbors.length - 1) {
            neighbors[i][j] = this.state.squares[i][j-1] + this.state.squares[i-1][j-1] + this.state.squares[i-1][j] + this.state.squares[i-1][j+1] + this.state.squares[i][j+1];
          }
          else if(j === 0) {
            neighbors[i][j] = this.state.squares[i-1][j] + this.state.squares[i-1][j+1] + this.state.squares[i][j+1] + this.state.squares[i+1][j+1] + this.state.squares[i+1][j];
          }
          else if(j === neighbors[0].length - 1) {
            neighbors[i][j] =  this.state.squares[i-1][j] + this.state.squares[i-1][j-1] + this.state.squares[i][j-1] + this.state.squares[i+1][j-1] + this.state.squares[i+1][j];
          }
          // general case
          else {
            neighbors[i][j] = this.state.squares[i-1][j-1] + this.state.squares[i-1][j] + this.state.squares[i-1][j+1] + this.state.squares[i][j+1] + 
                              this.state.squares[i+1][j+1] + this.state.squares[i+1][j] + this.state.squares[i+1][j-1] + this.state.squares[i][j-1];
          }
        }
      }

      let newArr = Array(30);
      for(var i = 0; i < newArr.length; i++) {
        newArr[i] = Array(79);
        for(var j = 0; j < newArr[i].length; j++) {
          if(this.state.squares[i][j] == 1) {
            if(neighbors[i][j] < 2) {
              newArr[i][j] = 0;
            }
            else if(neighbors[i][j] > 3) {
              newArr[i][j] = 0;
            }
            else {
              newArr[i][j] = 1;
            }
          }
          else {
            if(neighbors[i][j] == 3) {
              newArr[i][j] = 1;
            }
            else {
              newArr[i][j] = 0;
            }
          }
        }
      }
      this.setState({squares: newArr});
    }
  }

  render() {
    return (
      <div>
        <NavigationBar 
          onClick={(command) => this.handleClickNav(command)}
          start={this.state.start}
          variant={this.state.variant}
        />
        <Legend />
        <div className="game">
          <div className="game-grid">
            <Grid
              squares={this.state.squares}
              onClick={(x, y) => this.handleClick(x, y)}
            />
          </div>
        </div>
      </div>
    );
  }
}

export default Game;

从“React”导入React；
从“./Grid”导入网格；
从“/NavigationBar”导入导航栏；
从“/Legend”导入图例；
类游戏扩展了React.Component{
建造师（道具）{
超级（道具）；
//初始化2d数组以存储游戏状态
设abc=Array（30）；
对于（变量i=0；i3）{
newArr[i][j]=0；
}
否则{
newArr[i][j]=1；
}
}
否则{
if（邻域[i][j]==3）{
newArr[i][j]=1；
}