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

Question

我正在尝试将 React 与 Mui-dropzone 结合使用来处理文件上传。我想在一页中使用多个 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]}

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

Answer 1

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

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

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

React Mui-Dropzone Using multiple Dropzone on the same page

reactjs

dropzone