this.setState 中直接返回对象文字与原始值之间的区别？ (React.JS)

Question

我的目标是通过this.setState方法改变一个state对象，但是有一点让我很困惑。

首先，我创建了一个名为 newCount 的对象字面量，提供了一个新的 key: value 对数据并 return 编辑了 newCount，但是浏览器没有增加count 值符合我的预期。

这是代码：

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

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

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

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

Answer 1

第一个代码示例在名为 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

this.setState 中直接返回对象文字与原始值之间的区别？ (React.JS)

Difference between returning object literal vs raw values directly in this.setState? (React.JS)

javascript

return

object

setstate

reactjs