javascript - ReactJS setState 为空白对象不起作用

Question

我有这样的状态

state = {
        params: {}
    }

假设我们通过 this.setState({params:{data:2}}) 设置参数，那么当我们想要恢复到其初始状态时，我们调用 this.setState ({参数:{}})。状态已恢复，但问题是 View 仍然呈现 2(this.state.params.data 的值)。唯一有效的方法是我调用 this.setState({params:{data:''}})。想象一下，如果我们有很多字段，我们就不会这样做。有什么解决办法吗？

codesandbox 的链接是 here

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这样的静态绑定(bind)。如果对象中有 data 属性，那么我们将使用它的值。如果没有，则显示空字符串。

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