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')
);

这些代码的开头为：

传入的数字是：1
之前，数字为：0
现在选择的点是：0

然后显示：

传入的数字是：1
之前，数字为：1
现在选择的点是：1

毫无疑问，该数字已传递，但似乎不是从上一个this.state.number

获得的

我期望的是输出：

传入的数字是：1
之前，数字为：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获取错误状态

2 个答案: