Question

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
)

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

Answer 1

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

因此，要修复该错误，请将generateGameField函数重命名为componentWillMount并重新组织代码，如下所示：

  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)

这是我在反应官方文档中找到的：

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

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

遵守上述代码可以修改为：

  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)

React ES6类中的函数不会改变状态

1 个答案: