如何在 React 中使用增量运算符

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

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

//希望对你有帮助

---

从'@testing-library/react'导入{渲染}； 从'react'导入反应，{组件}；

类计数器扩展组件{

state = {
    count: 0,
    
};

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

handleDecrement = () => {
    this.setState( { count: this.state.count - 1 } )
};

render(){
    return(


        <div>

     
        
        <button onClick={this.handleIncrement} className="btn btn-secondary btn-sm m-4 ">Increment</button>

        <span className = "badge bg-primary m-5">{this.state.count}</span>

        <button onClick={this.handleDecrement} className="btn btn-secondary btn-sm ">Decrement</button>



        </div>

    )
}

};

导出默认计数器；

---

Answer 6

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

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

Answer 7

你可以使用 bind(this) 函数来绑定它 例如：-

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

或者您可以使用将为您绑定的箭头函数 例如：-

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