提交表单后反应输入状态未更新

Question

当上传带有反应的表单时，状态并没有像更新一秒钟那样更新然后返回输入的值我不知道为什么会发生这种情况

Gif showing the code behaivour

这些是状态

const [values, setValues] = useState({
    // Single File upload hooks
    singleFile: {},
    selectSingleFile: false,
    singleTitle: '',
    singleArtist: '',
    open: false,

    // Multiple File upload hooks
    multipleFiles: [],
    selectMultipleFiles: false,
    multipleTitle: '',
    multipleArtist: '',

    uploadStatus: Number,
  });

这是句柄提交代码

const handleSubmit = (event) => {
    // converting into the form object
    const formData = new FormData();
    formData.append('title', values.singleTitle);
    formData.append('artist', values.singleArtist);
    formData.append('file', values.singleFile);

    // making request to the server
    let reqOptions = {
      url: '/music/singleFile',
      method: 'POST',
      data: formData,
    };
    axios.request(reqOptions).then(function (response) {
      console.log(response);
      setValues({ ...values, uploadStatus: response.status });
    });

    // Setting the hook back to default values
    setValues({
      ...values,
      singleFile: {},
      selectSingleFile: false,
      singleTitle: '',
      singleArtist: '',
      open: true,
    });
    event.preventDefault();
  };

Form Code

Answer 1

const handleSubmit = (event) => {
    // converting into the form object
    const formData = new FormData();
    formData.append('title', values.singleTitle);
    formData.append('artist', values.singleArtist);
    formData.append('file', values.singleFile);

    // making request to the server
    let reqOptions = {
      url: '/music/singleFile',
      method: 'POST',
      data: formData,
    };
    axios.request(reqOptions).then(function (response) {
      console.log(response);
      setValues({ ...values, uploadStatus: response.status });
    }).then(res =>{        
    // Setting the hook back to default values
    setValues({
      ...values,
      singleFile: {},
      selectSingleFile: false,
      singleTitle: '',
      singleArtist: '',
      open: true,
    });
     });

    event.preventDefault();
  };

将您的状态清除在 .then 中，这样您就知道它只有在 api 调用成功后才会清除。