reactjs - 如何清除React中的状态变量？

Question

由于删除了对 replaceState 的支持，并且 setState 执行 shallow merging ，是否可以删除所有状态变量并通过添加新变量来更新状态，如下例所示，无需直接改变(this.state)状态？

// let's say this.state is { foo: "123", bar: "456", baz: "789" }

// case 1 - this.state is cleared out, all state variables are removed
// this.state is {}

// case 2 - this.state is cleared out and new variable(s) introduced
// this.state is { qux: "lately introduced state variable" }

Answer 1

is it possible to remove all state variables and update the state by adding new variables as in the cases below without mutating(this.state) the state directly

我可能是错的，但我认为这是不可能的。

当您为组件设置状态时，您正在为组件建立一个要遵守的模型，因此清除组件状态的属性(而不是更新它们)会破坏 React 中状态管理的原则。我相信这部分是删除replaceState的动机

参见https://github.com/facebook/react/issues/3236了解更多信息

想想冰和水之间的区别(主要区别是温度)。温度永远不会从方程中消失，它只是改变值，水也会做出相应的 react 。有状态的 React 组件在类似的原理下运行。

通过为您的组件建立模型，我们在两者之间创建了契约，并且可以以可预测的方式更改我们的用户体验。

您当然可以将这些值更新为 null、undefined、0、false 等，但一旦创建，您就无法将它们从初始状态的签名中删除。

但是，您可以使用嵌套状态轻松完成此操作:

this.state = { foo: { bar: { baz: 'buzz' } } }

// remove state.foo.bar
this.setState({ foo: {} })