useDropzone 钩子中的 fileRejections 和 isDragReject 的区别

Question

我使用 fileRejections 来捕获大小大于 5MB 的文件，使用 isDragReject 来捕获非 csv 的文件，如下所示：-

const maxSize=5242880;
const CSVDropzone = () => {
  const classes = useStyles();


  const { getRootProps, getInputProps, fileRejections, isDragActive, isDragAccept, isDragReject } = useDropzone({
    onDrop,
    accept: 'text/csv',
    minSize: 0,
    maxSize,
  });
  let isFileTooLarge = fileRejections.length > 0 && fileRejections[0].errors.length;

  return (
    <Fragment>
      <Grid container {...getRootProps()} className={classes.dropzone}>
        <input {...getInputProps()} />
        {isDragActive ? (
          <p>Drop here ...</p>
        ) : (
          <Fragment>
            <BackupOutlinedIcon />
            <p>Drag and drop or click to browse</p>
          </Fragment>
        )}
      </Grid>
      <Grid container>      
        <Grid item xs={12}>
            {isFileTooLarge && (
            <Typography variant="caption">File is too large. Allowed maximum sixe is 5 Mb.</Typography>
            )}
            {isDragReject && (
            <Typography variant="caption">Incorrect file format. Please upload a CSV file. </Typography>
            )}
        </Grid>
      </Grid>
    </Fragment>
  );
};

问题： 拖动非 csv 文件时..直到拖动的时间发生这种情况时，我们会看到文件格式不正确当文件被删除时，我们会看到文件太大
我觉得由于 isDragReject 是 useDropzone 的内部组件，因此只有在放置正在进行时才为真。我希望它保持真实，直到下一次 onDrop。
有人可以提出建议吗？

Answer 1

我认为，状态变量可以在这里帮助你。

我希望它在下一次 onDrop 之前保持不变。
有人可以提出建议吗？

为了实现这一点，我们仅在 isDragActive 为 true 时更新其值。

例如，您可以声明一个状态变量，例如

const [isRejected, setIsRejected] = useState(false);

，在 return 语句之前，可以添加以下条件，

if (isDragActive && isRejected != isDragReject) {
    setIsRejected(isDragReject);
}

在此之后，您可以使用 isRejected 而不是 isDragReject渲染。

PS：我还是 React 的初学者，所以如果我在这里做出任何错误的假设，请纠正我。