ReactJS setState 到空白对象不起作用

Question

我有这样的状态state = {        params: {}    }假设this.setState({params:{data:2}})当我们想要恢复到我们调用的初始状态时，我们设置了 params this.setState({params:{}})。状态恢复了，但问题是视图仍然呈现 2（this.state.params.data 的值）。唯一的工作方式是我打电话this.setState({params:{data:''}})。想象一下，如果我们有很多字段，我们就不会那样做。有什么解决办法吗？

Answer 1

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

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

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

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

this.state = {

  params: {data: ''}

}

和重置方法：

revertState = () => {

    this.setState({

      params: {data: ''}

    });

  };

或者，您可以通过删除valueprop使您的输入不受控制，但在这种情况下，您将无法直接修改它。