Question

我只是在学习React，我正在做教程：https://reactjs.org/tutorial/tutorial.html

在其中，我们假设创建一个函数来计算井字游戏的获胜者，然后将正方形内容列表传递给它。每次单击一个正方形时，我都会更新此列表。但是，我注意到，当我使用this.setState设置我的Board对象的方块列表，然后尝试将其与this.state.squares一起使用时，我并没有获得活动状态，而是前一个状态。

就像我在第一个方块中添加X一样，下一步移动时它将在this.state.squares中。

这是代码，我使用：

handleClick(square){
    let squares = this.state.squares.slice();
    squares[square] = this.state.playing;
    console.log(squares);
    this.setState({squares: squares});
    if(this.state.playing == 'X'){
      this.state.playing = 'O';
    }
    else{
      this.state.playing = 'X';
    }    
    this.state.winner = calculateWinner(this.state.squares); #If I do that I get the previous state
    this.state.winner = calculateWinner(squares); #If I do that I get the current state 
  }

为什么要这么做？

Answer 1

根据docs：

由于this.props和this.state可能是异步更新的，因此不应依赖于它们的值来计算下一个状态。

setState是一种异步方法，实际上意味着handleClick函数中的所有其他代码都将在this.state.squares突变之前执行。

但是代码中也存在另一个问题-您还试图直接修改状态：

if(this.state.playing == 'X'){
  this.state.playing = 'O';
}
else{
  this.state.playing = 'X';

直接修改this.state不会重新呈现您的组件。

要解决这些问题，您可以使用setState回调：

this.setState({squares: squares}, () => {

    if(this.state.playing == 'X'){
      this.setState({"playing":"O"});
    }
    else{
      this.setState({"playing":"X"});
    }
    // I'm assuming that `calculateWinner` does not depend on this.state.playing   
    this.setState({"winner":calculateWinner(this.state.squares));
});

仅在发生setState突变后才调用this.state.squares回调-确保在调用this.state.squares之前更新calculateWinner。

Answer 2

setState是异步的，但可以进行回调：

this.setState(
  { squares: squares },
  () => console.log("whatever")
);

Answer 3

这里快速介绍了

的不同方法

生命周期

组件的

。您必须对lifecylce方法有充分的了解，才能在React中进行编码。它将告诉您“

React何时更新状态

”

安装阶段的方法：

它从创建组件实例并将其呈现到DOM中时开始。

1。constructor(props)-首次初始化组件时调用。此方法仅被调用一次。 2。componentWillMount()-在即将安装组件时调用。 3。render()-渲染组件时调用。 4。componentDidMount()-组件安装完成时调用。

更新阶段中的方法：

从组件的属性或状态更改开始。

1。componentWillReceiveProps(nextProps)-在组件已更新并正在接收新道具时调用。 2。shouldComponentUpdate(nextProps, nextState)-收到道具后会被调用，即将更新。如果此方法返回false，则将不执行componentWillUpdate（），render（）和componentDidUpdate（）。 3。componentWillUpdate(nextProps, nextState)-在组件即将更新时调用。 4。render()-重新渲染组件时调用。 5。componentDidUpdate(prevProps, prevState)-当组件完成更新时调用。

卸载阶段的方法：

从DOM中删除组件时开始。

1。componentWillUnmount()-在组件卸载之前立即调用。

什么时候在React中更新状态

3 个答案: