如何在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

是否可以删除所有状态变量并通过添加新变量来更新状态，如下例所示，而不直接改变（this.state）状态

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

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

有关更多信息，请参阅https://github.com/facebook/react/issues/3236

想想冰和水之间的区别（关键的区别是温度）。温度永远不会从等式中消失，它只会改变数值，水也会相应地响应。有状态反应组件在类似原则下运行。

通过为您的组件建立模型，我们在2之间创建了一个契约，并且可以以可预测的方式对我们的UX进行更改。

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

您可以使用嵌套状态轻松完成此操作：

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

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

Answer 2

好吧，不。据我所知，你不能绕过这个，但你已经知道了this.state = {}。但是，我无法想象你想要完全清除你的状态的情况，但我可以想象你有时想重置状态。这可以通过以下方式完成

class Cmp extends React.Component {
  getClearState() {
    return {
      foo: undefined;
      bar: undefined;
      baz: undefined;
      qux: undefined;
    }
  }

  caseOne() {
    this.setState(this.getClearState())
  }

  caseTwo() {
    this.setState({
      ...this.getClearState(), 
      qux: 'my QUX',
    })
  }

  render() {}
}

Answer 3

对于案例1，你能做这样的事吗：

this.setState(Object.assign({}, {}));

这个用于2：

this.setState(Object.assign({}, {qux:'blah'}));