React-dropzone新阅读器加载缓慢工作

Question

当我请求接口时，我想根据答案来做条件，但它没有将我想要的值赋给errorMessageUploaded。你有什么想法吗？

当错误来自api时，我想得到一条消息，但当响应出现errormessageupload变量而没有结束请求时，我想得到一条消息。

不是有条件的。

  let uploadLoading = false;
  let errorMessageUploaded = null;

  `function Previews(props) {
     const [files, setFiles] = useState([]);
     const [test, testFile] = useState(null);

     const { getRootProps, getInputProps } = useDropzone({
       noClick: props.uploadDisable,
       accept: "application/vnd.ms-excel, 
       application/vnd.openxmlformats- 
       officedocument.spreadsheetml.sheet",
       onDrop: acceptedFiles => {
       uploadLoading = true;

       var file = acceptedFiles[0];
       fileName = file.path;

       const reader = new FileReader();

       let data = {
         file: null,
         purchase_order_id: props.purchaseorderid
       };

       reader.onload = event => {
        uploadLoading = true;
        data.file = event.target.result.replace(
          "data:application/vnd.openxmlformats- 
          officedocument.spreadsheetml.sheet;base64,",
          ""
        );
      });
       (async () =>
         await axios
           .post(
           baseUrl + "v1/purchaseorder/uploadpurchaseorder",
           data,
           axiosConfig
         )
         .then(response => {
           uploadLoading = false;
           errorMessageUploaded = null;
          window.location.reload();
         })
         .catch(error => {
           errorMessageUploaded = "test";
           uploadLoading = false;
           throw error;
         }))();
       reader.readAsDataURL(file);
       }
      });

      const thumbs = files.map(file => (
        <FontAwesomeIcon icon={faFileExcel} 
        className="excelUploadThumbs" />
      ));

      useEffect(
       () => () => {
     // Make sure to revoke the data uris to avoid memory leaks
      files.forEach(file => URL.revokeObjectURL(file.preview));
      },
      [files]
      );
       return uploadLoading == false ? (
<section className="container">
  <div {...getRootProps({ className: "dropzone" })}>
    <input {...getInputProps()} />
    <p className="dropzoneText1">Drop your file here</p>
    <p className="dropzoneText2">or</p>
    <p className="dropzoneText3">Select file</p>
  </div>
  <aside style={thumbsContainer}>{thumbs}</aside>
</section>
        ) : errorMessageUploaded != null ? (
<section className="container">
  <div className="displayErrorDiv">
    <p className="serviceError"> {errorMessageUploaded} </p>
  </div>
</section>
   ) : (
<section className="container">
  Data is uploading...
  <aside style={thumbsContainer}>{thumbs}</aside>
</section>
 );
 }`

Answer 1

代码不清楚，但这些可能会有帮助。

1. 将uploadLoading和errorMessageUploaded与useState
2. 配合使用需要cancelToken

let source = Axios.CancelToken.source();

const Send = async (url, method, data) => {
  try {
    source && source.cancel("Operation canceled due to new request.");
    source = Axios.CancelToken.source();
    return await Axios({ method, url, data, cancelToken: source.token });
  } catch (error) {
    if (Axios.isCancel(error)) {
      return Promise.resolve("canceled");
    } else {
      return Promise.reject(error);
    }
  }
};