react新手有一个疑惑

Question

react中this.setState到底能不能进行运算？我按照react 小书的教程写但是发现结果不对。。。

我这里的count每次点击都会+2，相当于是最后一个this.setState把前面的都覆盖了。

?

Answer 1

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

Answer 2

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

ES6

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

ES5

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

Answer 3

state应该写在constructor里边啊，你写在里边试试？(PS:感觉这种场景好奇怪啊)

constructor(){
    super();
    this.state ={
        count: true;
    }
}

Answer 4

首先是可以计算的,
其次:
当你使用 setState()时 会自动调用 render()方法重新渲染组件.
就是说在你点击时 count先变成+1 然后再次变成 +2 .