直接在 this.setState 中返回对象字面量与原始值的区别？ (反应.JS)

Question

我的目标是通过this.setState方法更改state对象，但有件事让我感到困惑。

首先，我创建了一个名为newCount的对象字面newCount ，给出了一个新的key: value对数据并返回了newCount ，但浏览器没有按照我的预期增加count数值。

这是代码：

this.setState(prevState => {
    var newCount = {
        count: prevState.count + 1
    } // It won't increase. Just keeps showing 1.
    return {
        newCount
    }
})

但是当我尝试像这样直接返回值时，它起作用了：

this.setState(prevState => {
    return {
        count: prevState.count + 1
    } // It goes working. 
})

这两个代码块有什么区别？

Answer 1

第一个代码示例在 state 中创建了一个名为newCount的新字段：

return {
   newCount, // es6 shorthand - equals to `newCount: newCount`
}

第二个示例工作正常，因为您正在更新正确的count字段。

如果你想让它以两种方式工作，只需添加一个正确的字段名称：

return {
   count: prevState.count + 1, // or `count: newCount.count`
}

有关对象初始化的更多详细信息： https : //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer