Реагируйте: Как очистить форму только после УСПЕШНОЙ отправки?

Question

Я создал форму в React, которая очищается после каждой отправки. Однако форма также очищается, если отправка не удалась, например, если поле заполнено пользователем неправильно. Это, конечно, довольно раздражает, так как пользователь должен повторить весь процесс ввода данных. Так что я пытаюсь реализовать очистку, которая активируется только после успешной отправки. Если отправка не удалась, данные остаются в форме, чтобы пользователь мог переработать данные.

Для управления состояниями я использую Redux.

Функция отправки

 onSubmit = e => {
    e.preventDefault();
    let { title, content, audio} = this.state;
    let formDataStory = new FormData(); // create form formData
    formDataStory.append('audio', audio); // add audio to formData
    formDataStory.append('title', title); // add title to formData
    formDataStory.append('content', content); // add content to formData
    this.props.addStory(formDataStory); // call addStory function with formDataStory as Input to create new Story
    this.setState({
      title: "", // clear title field after submission
      content:"", // clear content field after submission
    });
    this.inputRef.current.value = ''; // clear file field after submission 
  };

Добавление истории действий

export const addStory = formDataStory => (dispatch, getState) => {
  axios.post(apiBase +"/story/", formDataStory, tokenConfig(getState) )
    .then(res => {
      dispatch(createMessage({ addStory: "Story Added" }));
      dispatch({
        type: ADD_STORY,
        payload: res.data
      });
    })
    .catch(err =>
      dispatch(returnErrors(err.response.data, err.response.status))
    );
};

В настоящее время я не знаю, как это реализовать, и я не нашел хорошего прочтения о это (мое предположение примерно так: если история успешно добавлена, то -> очистить форму, иначе -> сохранить форму). Я рад любой поддержке в этом.

Answer 1

В редуксе это немного более длительный процесс, но не вариант, чем этот. Сначала проверьте действие, когда ax ios req не удалось из-за какой-либо ошибки, поэтому вызовите диспетчеризацию mathod и pass dispatch ({type: ERROR, payload: err.message}), а затем передайте логическое значение в редукторах, как в начальном состоянии в редукторе. set isError: false, но когда действие отправляет action.type как ERROR, тогда в этом случае следует изменить isError false на true. Затем в главном компе вызовите isError с помощью mapstatetoProps и проверьте, что либо приходящий реквизит из избыточного числа со свойством isError true или если isError равен false, тогда очистите форму, иначе пустую

Answer 2

You can use a .then and .catch after calling "this.props.addStory(formDataStory)" if you use a promise in addStory definition:

    export const addStory = formDataStory => (dispatch, getState) =>
new Promiuse((resolve, reject) => {
  axios.post(apiBase +"/story/", formDataStory, tokenConfig(getState) )
    .then(res => {
      dispatch(createMessage({ addStory: "Story Added" }));
      dispatch({
        type: ADD_STORY,
        payload: res.data
      });
      resolve(res);
    })
    .catch(err => {
      reject(err);
      dispatch(returnErrors(err.response.data, err.response.status))
    }
  );
});

And then: 

    onSubmit = e => {
  e.preventDefault();
  let { title, content, audio} = this.state;
  let formDataStory = new FormData(); // create form formData
  formDataStory.append('audio', audio); // add audio to formData
  formDataStory.append('title', title); // add title to formData
  formDataStory.append('content', content); // add content to formData
  this.props.addStory(formDataStory)
      .then(() => {
        this.setState({
          title: "", // clear title field after submission
          content:"", // clear content field after submission
        });
        this.inputRef.current.value = ''; // clear file field after submission 
      }) // call addStory function with formDataStory as Input to create new Story
};