直接在 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