状态中的计数值未递增

Question

在我的应用程序，

class App extends Component {
constructor(props){
super(props)
this.state={
count:0
}
}
render() {
return (
<div className='App-header'>
<button onClick={()=>{this.setState({count:this.state.count=this.state.count++})}}>You Clicked This : {this.state.count} Times.</button>
</div>
)
}
}

我在这个按钮上添加了一个事件:

<button onClick={()=>{this.setState({count:this.state.count=this.state.count++})}}>You Clicked This : {this.state.count} Times.</button>

但是当我点击它时，count的值不增加

ps: im new to react

Answer 1

与react和状态管理相比，这更多地与普通的旧javascript有关。

下面是你的问题的小复制:

let y = 2;
y = y++;
console.log(y);
y = ++y;
console.log(y);

这是因为++[(自增运算符)](如果使用后缀，在操作数后面加上运算符(例如，x++)，自增运算符自增并在递增之前返回值)的工作方式。

From the docs:

如果使用后置，操作数后加操作符(例如，x++)，自增操作符自增并返回递增前的值。如果使用前缀，在操作数前加上操作符(例如++x)，自增操作符将自增并返回自增后的值。

同样值得注意的是，你不应该做这样的事情:

this.state.variable = randomValue;

修复

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

可以工作，因为

this.state.count=++this.state.count

返回增量计数。但是状态实际上是由this.setState更新的，你也可以这样做:

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

当新的状态值依赖于前一个值

Answer 2

除了上面的答案，当更新状态时，这取决于以前的状态，你应该在状态更新中使用回调函数，接收以前的状态，返回值是更新后的状态

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