在同一页面上使用多个 Dropzone 反应 Mui-Dropzone

Question

我正在尝试使用带有 Mui-dropzone 的 React 来处理文件上传。我想在一页中使用多个 Dropzone 组件。我尝试将文件保存在状态（嵌套对象）中，但文件始终保存在我的最后一个状态，刚刚发生了什么？以及如何独立于每个状态存储每个文件？

const [data, setData] = useState({
    firstFile: [],
    secondFile: []
  });

  const [isOpen, setIsOpen] = useState(false);

  function handleDialog() {
    setIsOpen(!isOpen);
  }

  function onSaveFirstFile(file) {
    setData(prevState => ({
      ...data,
      firstFile: [...prevState.firstFile, file]
    }))
    setIsOpen(false);
  }

  function onSaveSecondFile(file) {
    setData(prevState => ({
      ...data,
      secondFile: [...prevState.secondFile, file]
    }))
    setIsOpen(false);
  }

  function showState() {
    console.log(data)
  }

  return (
    <div className="App">
{/* ------------------------------
 --------First Dropzone 
 ------------------------------ */}

      <Link classes={{ root: classes.linkRoot }} onClick={handleDialog}>
        <Typography variant="body2">Upload first File</Typography>
      </Link>
      <DropzoneArea
        dropzoneClass={classes.dropZoneRoot}
      />
      <DropzoneDialog
        open={isOpen}
        acceptedFiles={["image/jpeg", "image/png", "image/bmp"]}
        showPreviews={true}
        maxFileSize={5000000}
        showFileNamesInPreview={true}
        onDelete={deleteFileObj => {
          console.log("OnDelete", deleteFileObj);
        }}
        onClose={() => {
          console.log("OnClose : ", data);
          setIsOpen(false);
        }}
        onSave={onSaveFirstFile}
      />
      <br />

 {/* ------------------------------
 --------Second Dropzone 
 ------------------------------ */}
      <Link classes={{ root: classes.linkRoot }} onClick={handleDialog}>
        <Typography variant="body2">Upload second File</Typography>
      </Link>
      <DropzoneArea
        dropzoneClass={classes.dropZoneRoot}
      />
      <DropzoneDialog
        open={isOpen}
        acceptedFiles={["image/jpeg", "image/png", "image/bmp"]}
        showPreviews={true}
        maxFileSize={5000000}
        showFileNamesInPreview={true}
        onDelete={deleteFileObj => {
          console.log("OnDelete", deleteFileObj);
        }}
        onClose={() => {
          console.log("OnClose : ", data);
          setIsOpen(false);
        }}
        onSave={onSaveSecondFile}
      />
      <br />
      <button onClick={showState}>Show State!</button>
    </div>

这是我在第一个 Dropzone 上上传文件后在控制台中得到的（它以错误的状态保存，为什么？）

Object {firstFile: Array[0], secondFile: Array[1]}

注意：这是我的代码框：https://codesandbox.io/s/multiple-mui-dropzone-4fwlb

Answer 1

  function handleDialog() {
    setIsOpen(!isOpen);
  }

DropzoneDialog 都通过此函数打开。当您单击其中一个时，您在两者上都设置了open={true}。您的文件总是上传到secondFile 数组，因为您的第一个 DropZone 总是隐藏在第二个之后。