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

get是一个异步函数。 React可以将一堆setState一起批处理。因此setState的值是您提出请求时的值。

更好的解决方案来调用在执行setState时得到评估的函数。

this.state.count

来自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 })

Answer 3

setState函数在this.state.count递增之前返回，因为您使用的是修复后操作符（++）。此外，setState是异步的，它接受回调作为第二个参数，当状态更新时会触发，因此您应该将console.log放在cb内。

Answer 4

你正试图改变状态（访问this.state.field并增加它的值），这就是++。它尝试增加该状态值，然后将其分配给新状态:)仅通过调用setState来改变状态。试试

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

或

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

//在函数范围内的新状态变量，我们甚至可以安全地使用它，++。但是不要在this.state上调用++。一般来说，不要使用++，这是不好的做法对于简单的作业

a+=1 || a-=1 || a*=1 || a%=1

更好，甚至可以明确地写出来。

 a = a + 1

Answer 5

我找到了解决方案。当我在做this.setState({count:++this.state.count})时，它正在发挥作用。

原因是我正在this.setState({count:this.state.count++})新的state.count值没有被发送到setState React函数。

Answer 6

您可以使用bind（this）函数将其绑定例如：-

<div onClick={this.increase.bind(this)}>

或者您可以使用Arrow函数为您绑定例如：-

<div onClick={()=> this.increase()} >

如何在React中使用increment运算符

6 个答案: