ReactJS setState为空白对象不起作用

Question

我有这样的状态

state = {
        params: {}
    }

假设我们通过this.setState({params:{data:2}})设置参数，然后当我们想恢复到其初始状态时，调用this.setState({params:{}}) 。 状态已还原，但问题在于视图仍呈现2（this.state.params.data的值）。 工作的唯一方法是调用this.setState({params:{data:''}}) 。 想象一下，如果我们有很多领域，我们不会那样做。 有什么解决办法吗？

代码和框的链接在这里

Answer 1

您可以通过对value属性使用三元运算符来解决此问题。 查看工作的沙箱： https : //codesandbox.io/s/blissful-clarke-l2pif

<Input
   value={params["data"] ? params["data"] : ""}
   onChange={(e, { value }) => {
      this.buildParams("data", value);
   }}
/>

这将起作用，因为它强制语义ui标签有条件地检查我们状态中的值，而不是使用诸如params.data类的静态绑定。 如果对象中有data属性，那么我们将使用它的值。 如果不是，则显示一个空字符串。

输入所使用的值始终受到控制，并且在将params恢复为{}时不会保留。 我假设您可以使用与每个输入相对应的特定name或key交换数据。

Answer 2

调用this.setState({params:{}})会将params设置为状态上的空对象。 要验证您可以在回调中记录新状态：

this.setState({params:{}}, () => console.log(this.state)) // {params: {}}

编辑：查看更新的问题，您遇到的问题是您的状态通过this.state.params.data连接到输入。 在这种情况下，将状态params设置为空对象时，input的值将设置为undefined并且会收到警告： A component is changing a controlled input of type text to be uncontrolled.

在这种情况下，您的默认状态必须如下所示：

this.state = {
  params: {data: ''}
}

和重置方法：

revertState = () => {
    this.setState({
      params: {data: ''}
    });
  };

另外，您可以通过删除value属性来使输入不受控制，但是在这种情况下，您将无法直接对其进行修改。