React-dropzone 新阅读器加载缓慢答案

【问题标题】：React-dropzone new reader onload slowly workingReact-dropzone 新阅读器加载缓慢
【发布时间】：2020-03-13 19:10:44
【问题描述】：

当我请求api时，我想根据答案设置条件，但它没有分配我想要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>
 );
 }`

【问题讨论】：

这个问题很不清楚，它没有足够的信息。尝试添加一些代码并直接指向您的问题部分。
你能分享你的代码 sn-ps 吗？
我编辑了。对不起。

标签： javascript reactjs redux dropzone.js react-dropzone

【解决方案1】：

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

将uploadLoading 和errorMessageUploaded 与useState 一起使用
需要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);
    }
  }
};

【讨论】：