javascript - react : How to clear form only after SUCCESSFUL submit?

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

添加故事 Action

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

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