Javascript React ES6类中的函数不'；不改变状态 类主扩展React.Component{ 建造师（道具）{ 超级（道具）； 此.state={ 世代：0， 行：30， 科尔斯：30， 是的，错， 速度:500,， 游戏场：[] } this.generateGameField（） } generateGameField（）{ var结果=[]； for（设i=0；i

请帮帮我。函数generateGameField应该创建新数组并用0或1填充它。该函数实际上创建数组，但不更改状态。在函数中，我可以访问状态，因此我不知道出了什么问题

在我看来，您正在尝试初始化组件。如果这是您想要实现的，那么您应该使用react生命周期方法

因此，要修复该错误，请将

generateGameField

函数重命名为

componentWillMount

，并按如下方式重新组织代码：

class Main extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      generations: 0,
      rows: 30,
      cols: 30,
      isGoing: false,
      speed: 500,
      gameField: []
    }

    this.generateGameField()
  }

  generateGameField() {
    var result = [];
    for (let i = 0; i < this.state.rows; i++) {
      result[i] = [];
      for (let j = 0; j < this.state.cols; j++) {
        result[i][j] = Math.round(Math.random());
      }
    }
    console.log(result)
    this.setState({ gameField: result })

  }

  render() {
    return (
      <button onClick={() => console.log(this.state)}>Click me</button>
    )
  }

}


ReactDOM.render(
  <Main />,
  document.body
)

类主扩展React.Component{
建造师（道具）{
超级（道具）；
}
组件willmount（）{
让结果=[]；
常数行=30；
常数cols=30；
for（设i=0；i单击我
)
}
}
ReactDOM.render（，document.body）

这是我在react官方文档中发现的：

componentWillMount（）在装入之前立即调用。它在render（）之前调用，因此在此方法中设置状态不会触发重新渲染。避免在这种方法中引入任何副作用或订阅

这是唯一一个在服务器渲染时调用的生命周期挂钩。通常，我们建议改为使用构造函数（）

遵守上述代码可修改为：

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

     componentWillMount() {
       let result = [];
       const rows = 30;
       const cols = 30;
       for (let i = 0; i < rows; i++) {
           result[i] = [];
           for (let j = 0; j < cols; j++) {
              result[i][j] = Math.round(Math.random());
           }
       }
       console.log(result)
       this.setState({
         generations: 0,
         rows: 30,
         cols: 30,
         isGoing: false,
         speed: 500,
         gameField: result
       })

     }

     render() {
        return (
        <button onClick={() => console.log(this.state)}>Click me</button>
        )
     }

 }

 ReactDOM.render(<Main />,document.body)

类主扩展React.Component{
建造师（道具）{
超级（道具）；
让结果=[]；
常数行=30；
常数cols=30；
for（设i=0；i单击我
)
}
}
ReactDOM.render（，document.body）

如果要在构造函数中设置状态，为什么不将其作为初始状态？从

generateGameField

返回

result

，并在

this.state={…}

do

gameField:this.generateGameField（）

。谢谢。我知道这一点，但我想知道为什么我的代码不做它应该做的事情。我的意思是为什么我的函数可以访问状态，但不能更改它？是的，setState是异步的。但是我添加了一个按钮，在点击它之后应该可以打印我的状态。国家也不会改变。我可以在5、10、15秒后单击按钮，状态将保持与您相同。它起作用了。但是我想我应该在构造函数中初始化状态。你是对的，这是react官方文档中建议的。我刚刚添加了另一个选项。

  class Main extends React.Component {
     constructor(props) {
       super(props);
       let result = [];
       const rows = 30;
       const cols = 30;
       for (let i = 0; i < rows; i++) {
           result[i] = [];
           for (let j = 0; j < cols; j++) {
              result[i][j] = Math.round(Math.random());
           }
       }
       console.log(result);
       this.state = {
         generations: 0,
         rows: 30,
         cols: 30,
         isGoing: false,
         speed: 500,
         gameField: result
       };
     }

     render() {
        return (
        <button onClick={() => console.log(this.state)}>Click me</button>
        )
     }

 }

 ReactDOM.render(<Main />,document.body)