javascript - React中状态数据和解构的区别

Question

这是 React 的非常基础的内容，但我真的需要理解它为什么会这样。这部分代码有什么区别吗:示例1:

increment = () => {
const { count } = this.state; // doing destructure ...
this.setState({ count: count + 1 }, () => {
console.log("Clicked times: ", count);
});
};

这部分示例2:

increment = () => {
//const { count } = this.state;
this.setState({ count: this.state.count + 1 }, () => { //putting "this.state.count" directly
console.log("Clicked times: ", this.state.count);
});
};

因为当我采用第二种方式(示例2)时，我得到了正确的输出:它采用异步方式，在浏览器和控制台中显示相同的数据。为什么第一个示例不能以正确的方式工作，是因为我将值保存在新变量中(通过进行解构)。这是我的完整代码链接:https://codesandbox.io/s/counting-in-react-j0uyc

任何帮助将不胜感激!谢谢

Answer 1

是的，它们是相同的。 decroment 看起来不起作用的原因是您正在复制 this.state.count

例如。如果 this.state.count 为 1。在 decrement 函数的顶部，您将创建一个值为 1 的局部变量 count。然后，您将 this.state.count 更新为 2，但是，本地 count 是完整副本(不是引用)，因此不会受到此更新的影响。

如果将 console.log("Clicked times: ", count); 替换为 console.log("Clicked times: ", this.state ，您会发现它们是相同的.count);