reactjs - 如何在 reactJS 中推送/强制状态更新

Question

我知道已经有很多与状态更新相关的问题。但是我无法弄清楚为什么它不起作用。还是有任何简单的方法来强制更新状态？

我有一个执行此操作的点击处理程序

下面的代码工作得很好

onButtonClick(){
   var state = JSON.parse(JSON.stringify(this.state)) // To mutate the state;
   state.name = "newName";
   this.setState(state)
}

下面不使用“Hellow”更新 state.items

onButtonClick(){
   var state = JSON.parse(JSON.stringify(this.state)) // To mutate the state;
   state.items.push("Fourth")
   this.setState(state)
}

我在我正在构建的项目中使用了类似的示例，但无法弄清楚为什么上述语法不起作用。

1. 打开https://imvetri.github.io/ui-editor/
2. 点击左侧的“编辑器”
3. 打开调试器
4. 将鼠标移动到黑色区域并单击鼠标右键。
5. 在第 46 行设置断点。它的渲染功能，如果你检查 this.state 你会注意到this.state.items不会改变

预期的：

第一的

第二

第三

第四

实际的：

第一的

第二

第三

Answer 1

改变状态以触发更新，如下所示：

onButtonClick(){
   var items = this.state.items;
   this.setState({items: [...items, "Helow"])
}