反应 setState 得到错误的状态

Question

我最近开始学习 React，这是我发现的一个问题。我在这里尝试做的是：

将数字设置为0作为初始状态。
用我传入的数字改变状态
再次打印状态。

代码如下：

class Test extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      number:0,
    };
  }

 changeNum(num){
    console.log('num pass in is: '+num);
    console.log('before, the num is: ' + this.state.number);
    this.setState({number: num});
    console.log('now the point chosen is: ' + this.state.number);
 }

  render() {
    return (
      <button onClick={()=>this.changeNum(1)}>Click</button>
    );
  }
}

ReactDOM.render(
  <Test />,
  document.getElementById('root')
);

这些代码将开始为：

传入的num是：1
之前，num是：0
现在选择的点是：0

然后显示：

传入的num是：1
之前，num是：1
现在选择的点是：1

号码肯定是传进来的，不过好像不是上次拿的this.state.number

我期望的是输出：

传入的num是：1
之前，num是：0
现在选择的点是：1

这个问题的原因是什么？谢谢

Answer 1

setState是async，更新状态需要时间。在setState中使用callback，它将在setState完成执行时执行。

this.setState({
   number: num
}, () => console.log('now the point chosen is: ' + this.state.number));

Demo

Answer 2

使用 prevState 设置状态，这是最推荐的方式。

this.setState(prevState => ({
 num: prevState.number = num,
})).

反应 setState 得到错误的状态

react setState get wrong status

status

reactjs