react新手有一个疑惑

Question

react中this.setState到底能不能进行运算？我按照react 小书的教程写但是发现结果不对。。。我这里的count每次点击都会+2，相当于是最后一个this.setState把前面的都覆盖了。?

Answer 1

this.setState 是异步的, 需要在回调函数里面去取值

ES6

this.setState({
  count: 0}, () => {
  console.log(this.state.count);
})

ES5

this.setState({
  count: 0}, function(){
  console.log(this.state.count);
})

Answer 2

setState是异步的，也就是说：并不是setState被调用后state就会立即改变，它只是保证在之后的某刻会被改变。因此，你的第2，3个setState中的this.state.count依旧是undefined。
另外，为了优化性能，在一定时间内像这种传对象字面量方式调用setState是会被批量处理的，前两个setState会被合并到第三个调用中，也就是说只有第三个会起作用。

为了达到你原来代码的意图，你应该使用updater函数

 this.setState((prevState) => ({ ...prevState, count: 0 }));

 this.setState((prevState) => ({ ...prevState, count: prevState.count + 1 }));

 this.setState((prevState) => ({ ...prevState, count: prevState.count + 1 }));