react this.setState()的使用

this.setState()的使用

最近在学习react，写demo的时候要监听输入框内部的变化，获取输入框的值后用this.setState()方法进行值的更新，但是发现更新以后在用this.state.user获取到的是之前的值。

constructor(props){
    super(props);
    this.state = {
      user: 'xiaoming'
    }
  }
handleInput() {
   this.setState({user : 'xiaohua' });
   console.log(this.state.user);//此时输出的值仍然是xiaoming
}

于是我查了react的官方文档，说明如下

void setState (
      function|object nextState,
      [function callback]
)

setState的第二个参数是一个回调函数，在setState() 的异步操作结束并且组件已经重新渲染的时候执行。也就是说我们可以通过这个回调来拿到更新的state的值。
所以正确的使用应该是：

handleInput() {
    this.setState({user : 'xiaohua' }, () => {
      console.log(this.state.user);//此时输出的值是xiaohua
    });
  }