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

IT技术 reactjs
2021-04-13 05:04:10

为什么当我在做的时候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/

6个回答

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

我也通读了文档，但无法理解为什么应该在使用状态数据时使用 previos 状态。你能告诉我为什么 this.state.count 是你提出请求时的值吗？
2021-06-05 05:04:10
@pravinpoudel 看看我在stackoverflow.com/a/61275983/1706351 上的回答。我设计了一个例子来展示错误使用导致的错误
2021-06-12 05:04:10

通过执行this.state.count++，您可以改变状态，因为它与执行相同this.state.count += 1。你永远不应该改变状态（参见https://facebook.github.io/react/docs/component-api.html）。更喜欢这样做：

this.setState({ count: this.state.count + 1 })
是的，微妙，但有道理。增量运算符 (++) 直接作用于状态值，所以是的，不应该被允许。但不明显。谢谢！
2021-06-01 05:04:10
请考虑查看@William Choy 的回答。这是官方 React 文档中推荐的增加状态的方法。
2021-06-18 05:04:10

由于您使用的是后置运算符 (++)，因此setState函数返回之前this.state.count会增加。此外，setState它是异步的，它接受一个回调作为第二个参数，当状态更新时触发，所以你应该把你的console.log放在 cb 里面。

您正在尝试改变状态（访问 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

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

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

你应该看看安东尼的回答。您永远不应该直接改变您的状态，因此应避免使用所有 ++ 运算符。
2021-05-27 05:04:10
其它你可能感兴趣的问题
上一篇react长按事件 下一篇React-Redux：动作必须是普通对象。使用自定义中间件进行异步操作