Javascript 不使用setState更新状态

我有一个表单，在我提交表单后，我想清除字段。因此，首先，我创建一个状态的副本，其中包含表单数据以不变地更改它们，然后将值设置为nothing。但是在使用setState（）之前，状态会更新，在发送数据之后，字段会清除。这正是我想要的，但问题是，为什么在使用setState（）之前状态会更新，即使我正在使用状态的副本，但还没有设置它

class ContactData extends Component {
  state = {
    orderForm: {
      name: {
        elementType: 'input',
        elementConfig: {
          type: 'text',
          placeholder: 'Your Name',
        },
        value: '',
      },
      street: {
        elementType: 'input',
        elementConfig: {
          type: 'text',
          placeholder: 'Your Street',
        },
        value: '',
      },
      zipcode: {
        elementType: 'input',
        elementConfig: {
          type: 'text',
          placeholder: 'ZIP Code',
        },
        value: '',
      },

      country: {
        elementType: 'input',
        elementConfig: {
          type: 'text',
          placeholder: 'Your Country',
        },
        value: '',
      },
      email: {
        elementType: 'input',
        elementConfig: {
          type: 'email',
          placeholder: 'Your Email',
        },
        value: '',
      },

      deliveryMethod: {
        elementType: 'select',
        elementConfig: {
          options: [
            { value: 'fastest', displayValue: 'Fastest' },
            { value: 'cheapest', displayValue: 'Cheapest' },
          ],
        },
      },
    },
    loading: false,
  };
  orderBtnHandler = (e) => {
    e.preventDefault();
    this.setState({ loading: true });
    const formData = {};
    for (let formElementId in this.state.orderForm) {
      formData[formElementId] = this.state.orderForm[formElementId].value;
    }
    const order = {
      ingredient: this.props.ingredient,
      price: this.props.price,
      formData: formData,
    };
    axios
      .post('/order.json', order)
      .then((res) => {
        console.log(this.state.orderForm);
        const updatedOrderForm = { ...this.state.orderForm };
        const updatedFormEl = {};
        for (let keys in updatedOrderForm) {
          updatedFormEl[keys] = updatedOrderForm[keys];
        }

         for (let keys in updatedFormEl) {
           updatedFormEl[keys].value = '';
         }
        console.log(this.state.orderForm);


        this.setState({ loading: false, orderForm: updatedOrderForm });
        console.log(this.state.orderForm);
      })
      .catch((err) => {
        this.setState({ loading: false });
      });
  };

  inputChangeHandler = (e, id) => {
    const updatedOrderForm = { ...this.state.orderForm };
    const updatedFormEl = { ...updatedOrderForm[id] };
    updatedFormEl.value = e.target.value;
    updatedOrderForm[id] = updatedFormEl;
    this.setState({ orderForm: updatedOrderForm });
  };

  render() {
    const formArray = [];
    for (let key in this.state.orderForm) {
      formArray.push({
        id: key,
        config: this.state.orderForm[key],
      });
    }
    // console.log(formArray);
    let form = (
      <div className={classes.ContactData}>
        {formArray.map((formEl) => {
          // console.log(formEl);

          return (
            <Input
              key={formEl.id}
              label={formEl.id.toUpperCase()}
              elementConfig={formEl.config.elementConfig}
              elementType={formEl.config.elementType}
              value={formEl.config.value}
              changed={(e) => this.inputChangeHandler(e, formEl.id)}
              // options={
              //   formEl.id === 'deliveryMethod'
              //     ? formEl.config.elementConfig.options
              //     : null
              // }
            />
          );
        })}
        <Button type='Success'>ORDER</Button>
      </div>
    );
    if (this.state.loading) {
      form = <Spinner />;
    }
    return <form onSubmit={this.orderBtnHandler}>{form}</form>;
  }
}

即使在第一个中，值也设置为零！

---

为什么？

您是否以某种方式改变了实际状态？因此，festival我复制了一份包含表单数据的状态副本…festival？表单可能正在重置所有输入字段，在您提交之后，axios调用解决之前。您可以在调用axios call之前尝试克隆。@AbhinavAnshul不，我得到了一个副本并正在处理该副本，因此我相信该州没有直接接触，但不知怎的，它正在接触，我不知道为什么！

 axios
      .post('/order.json', order)
      .then((res) => {
        console.log(this.state.orderForm);
        const updatedOrderForm = { ...this.state.orderForm };
        const updatedFormEl = {};
        for (let keys in updatedOrderForm) {
          updatedFormEl[keys] = updatedOrderForm[keys];
        }

         for (let keys in updatedFormEl) {
           updatedFormEl[keys].value = '';
         }
        console.log(this.state.orderForm);


        this.setState({ loading: false, orderForm: updatedOrderForm });
        console.log(this.state.orderForm);
      })