在 React 中以嵌套状态重置输入字段（受控组件）答案

【问题标题】：Resetting input field (controlled component) in a nested state in React在 React 中以嵌套状态重置输入字段（受控组件）
【发布时间】：2020-10-14 09:21:26
【问题描述】：

我正在处理嵌套状态。在某个事件（在表单提交时）之后，我想将表单输入字段重置为初始状态，以及它的标志（对于受控组件）。但我做不到。

我的初始状态如下所示：

state = {
orderForm: {
  name: {
    elementType: "input",
    elementConfig: {
      type: "text",
      placeholder: "Your Name",
    },
    value: "",
    validation: {
      required: true,
    },
    valid: false,
  },
  address: {
    elementType: "input",
    elementConfig: {
      type: "text",
      placeholder: "Your Address",
    },
    value: "",
    validation: {
      required: true,
    },
    valid: false,
    touched: false,
  },
  email: {
    elementType: "input",
    elementConfig: {
      type: "text",
      placeholder: "Your Email",
    },
    value: "",
    validation: {
      required: true,
    },
    valid: false,
    touched: false,
  },
  mobile: {
    elementType: "input",
    elementConfig: {
      type: "text",
      placeholder: "Your Phone",
    },
    value: "",
    validation: {
      required: true,
      length: true,
    },
    valid: false,
    touched: false,
  },
  addressType: {
    elementType: "select",
    elementConfig: {
      options: [
        { value: "home", displayValue: "Residental" },
        { value: "office", displayValue: "Commerical" },
      ],
    },
    value: "home",
    validation: {
      required: false,
    },
    valid: true,
  },
},
formIsValid: false,
};

当我提交时，它看起来像，

{
"orderForm": {
"name": {
  "elementType": "input",
  "elementConfig": {
    "type": "text",
    "placeholder": "Your Name"
  },
  "value": "abc",
  "validation": {
    "required": true
  },
  "valid": true,
  "touched": true
},
"address": {
  "elementType": "input",
  "elementConfig": {
    "type": "text",
    "placeholder": "Your Address"
  },
  "value": "123 - xyz",
  "validation": {
    "required": true
  },
  "valid": true,
  "touched": true
},
"email": {
  "elementType": "input",
  "elementConfig": {
    "type": "text",
    "placeholder": "Your Email"
  },
  "value": "a@bc.com",
  "validation": {
    "required": true
  },
  "valid": true,
  "touched": true
},
"mobile": {
  "elementType": "input",
  "elementConfig": {
    "type": "text",
    "placeholder": "Your Phone"
  },
  "value": "1234567890",
  "validation": {
    "required": true,
    "length": true
  },
  "valid": true,
  "touched": true
},
"addressType": {
  "elementType": "select",
  "elementConfig": {
    "options": [
      {
        "value": "home",
        "displayValue": "Residental"
      },
      {
        "value": "office",
        "displayValue": "Commerical"
      }
    ]
  },
  "value": "office",
  "validation": {
    "required": false
  },
  "valid": true,
  "touched": true
}
},
"formIsValid": true
}

所以我尝试了这种方法，我尝试使用以前的状态重置它，但我无法做到。我知道我可以通过将其存储在变量中来做到这一点，请参阅link，但不想使用它。而且使用 Spread 运算符为每个副本制作副本太乏味了。

我尝试过的方法，它不起作用。

this.setState(
        (prevState) => {
          const orderForm = [...prevState.orderForm];
          return { orderForm };
        },
        () => {this.props.history.push("/orders")}
      );

我知道可能有更好的方法。而且我不想使用任何帮助库。谢谢。

【问题讨论】：

标签： javascript reactjs forms react-state-management

【解决方案1】：

这行得通吗，

this.setState(prevState=>({
return {
   ...prevState,
   // spread your initial state.
 }),()=>console.log(your state));

现在可以有不同的场景，如果你的状态是在组件级别还是在 redux 级别，我不会。但在这两种方式中，您都可以访问您的初始状态。如果是在组件级别，那就很容易了。

如果您使用的是 redux，那么您可以使用选择器并从您的 redux 或您正在使用的任何其他状态管理库中获取初始状态作为道具。

【讨论】：