javascript - 不使用 setState 更新状态

Question

我有一个表格，提交该表格后，我想清除这些字段。因此，首先我制作了一份状态副本，其中包含表单数据以不可变地更改它们，然后将值设置为空。但是在使用 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>;
  }
}

我在这段代码中做了三个 console.logs：

 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);
      })

甚至在第一个中，值也设置为零！为什么？

标签： javascriptreactjs