如何在React中使用increment运算符

Question

为什么我这样做this.setState({count:this.state.count*2})是有效的,但是当我这样做时:this.setState({count:this.state.count++}) 它不起作用？

为什么,以及如何解决它？

完整代码:

var Hello = React.createClass({
    getInitialState:function(){
    return {count:parseInt(this.props.count)}
  },
    a:function(){
    this.setState({count:this.state.count++})
    console.log(this.state)
  },
  render: function() {
    console.log(this.state)
    return <div onClick={this.a}>Click to increment the counter<b> {this.state.count} </b></div>;
  }
});

ReactDOM.render(
  <Hello count="1" />,
  document.getElementById('container')
);

但是这段代码正在运行:

a:function(){
    this.setState({count:this.state.count*2})
    console.log(this.state)
  },

JSFiddle:https://jsfiddle.net/69z2wepo/55100/

Answer 1

setState是一个异步函数.React可以将一堆setStates一起批处理.因此,值this.state.count是您发出请求时的值.

一个更好的解决方案,用于调用在执行setState时获得评估的函数.

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

来自https://facebook.github.io/react/docs/state-and-lifecycle.html

Answer 2

通过这样做this.state.count++,你改变了状态,因为它与做同样的事情this.state.count += 1.你永远不应该改变状态(参见https://facebook.github.io/react/docs/component-api.html).更愿意这样做:

this.setState({ count: this.state.count + 1 })