必须单击 dropzone 两次才能显示文件查看器

问题描述

使用 react-dropzone: "11.0.3"

我有一个我认为非常基本的 dropzone 组件来上传文件的设置，但出于某种原因，我必须单击自定义 dropzone 组件两次才能显示文件查看器。有什么我遗漏的吗？

这是我的自定义 dropzone 组件：

  const CSVDropzone = () => {
    const onDrop = acceptedFiles => {
      if (acceptedFiles.length) {
        setCsverror(null);
        const extPattern = /\.[0-9a-z]+$/i;
        const extension = acceptedFiles[0].path.match(extPattern)[0];
        if (!".json,.csv".includes(extension)) return setIsDragReject(true);
        setIsDragReject(false);
        setFile(acceptedFiles[0]);
        if (extension === ".json") {
          readJSONFile(acceptedFiles[0]);
        }
      }
    };
 
    const DefaultMessage = () => (
      <>
        <FontAwesomeIcon className="file-upload" icon={faFileUpload} />
        <p>
          <span className="bold">Click to upload</span> or drag file here{" "}
          <span className="bold">(CSV or JSON)</span>
        </p>
      </>
    );
 
    const { getRootProps,getInputProps,isDragActive } = useDropzone({
      onDrop,accept: [".json",".csv"],disabled: !!file || !!data || !!json
    });
 
    return (
      <section
        className={
          data !== null
            ? "display-none"
            : isDragReject
            ? "rejected"
            : "drag-container"
        }
      >
        <div
          className={`dropzone ${file || data || json ? "disabled" : ""}`}
          { ...getRootProps()}
        >
          <input {...getInputProps()} />
          {isDragReject && (
            <p className="rejected">
              File type is not supported. Please upload a{" "}
              <span className="bold">CSV</span> or{" "}
              <span className="bold">JSON</span> file
            </p>
          )}
          {isDragActive && !isDragReject && (
            <p className="bold activeDrop">Drop Here...</p>
          )}
          {!isDragActive && !isDragReject && <DefaultMessage />}
        </div>
      </section>
    );
  };

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）