Блог

У меня есть форма, и после отправки этой формы я хочу очистить поля. Итак, прежде всего, я создаю копию состояния, в котором есть данные формы, чтобы изменять их неизменно, затем устанавливаю значения в ничто. Но перед использованием 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>;
  }
}



  

Я делаю три консоли.регистрируется в этом блоке кода:

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

и даже в первом случае значение не имеет значения!
почему?