为什么 this.state.count++ 在 this.setState({}) 中不起作用

Question

我试过这个答案

import React from "react";
class App extends React.Component {
constructor() {
super();
this.state = {
count: 0,
};
this.increment = this.increment.bind(this);
}
increment() {
this.setState({
count: this.state.count++,
});
}
render() {
return (
<div>
<h1>{this.state.count}</h1>
<button onClick={this.increment}>Change!</button>
</div>
);
}
}
export default App;

我意识到，当我只是改变增量函数时，一切都很好

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

我想知道，当使用this.state.count+1而不使用this.state.count++时，为什么increment((会起作用。。

Answer 1

当您在后缀中使用递增/递减运算符时，返回值是更新前的变量。然而，如果您在前缀中使用它，它会进行更新，然后返回结果。使用count + 1在这方面类似，因为它取count的值，加一，然后返回结果。

您可以通过跳到浏览器控制台并进行以下实验来测试这一点：

a=1;
console.log(a++); //returns 1
console.log(a); //returns 2
b=1;
console.log(++b); //returns 2
console.log(b); //returns 2

总结：

• 使用this.state.count++是将原始值返回给setState()
• 使用this.state.count + 1是将原始值+1返回到setState()

这篇短文很好地解释了这一点。

我希望这能有所帮助。

Answer 2

问题

问题是应用操作的顺序以及增量的工作方式。在您的情况下(大致上，实际上还有更多类似于GetValue抽象操作的操作(如下：

1. 在this.state.count上调用内部[[Get]]方法
2. 在this.state.count上调用内部[[Set]]方法，结果为步骤1+1
3. 对具有旧值的({}).count调用内部[[Set]]方法

因此，在步骤3之后，{ count: 1 }处于状态，对象为{ count: 0 }

设置状态

在setState的掩护下，React做了以下(再次，大致(：

4. 使用组件的updater上步骤3中的对象调用enqueueSetState，将其推送到状态更新队列中
5. 当状态更新时，在遍历新的部分状态的循环中，Object.assign()在旧状态上被调用，因此覆盖count到0

解决方案

如注释中所述，切换到前缀增量，因为在步骤3中，返回的值将是新值：

{ count : ++this.state.count }

参考

1. MDN上的增量引用
2. 内部方法规范
3. Postfix增量规范
4. 前缀增量规范
5. MDN上的Object.assign()参考