Reactjs 在同一页面上使用多个Dropzone对Mui Dropzone作出反应

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

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

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

这两个

DropzoneDialog

都可以通过此功能打开。当您单击其中一个时，可以在两个上都设置

open={true}

。您的文件总是上载到

secondFile

数组，因为您的第一个DropZone总是隐藏在第二个DropZone后面

---

这两个

DropzoneDialog

都可以通过此功能打开。当您单击其中一个时，可以在两个上都设置

open={true}

。您的文件总是上载到

第二个文件

数组，因为您的第一个DropZone总是隐藏在第二个DropZone后面。

对不起，您的意思是我应该使用不同的状态来控制对话框的每个状态吗？这取决于您。您的状态可以是一个字符串（或数字），然后是沿

open={myState===/*some value*/}

行的内容，而不是布尔值。无论哪种方式，您都需要确保不要同时打开两个对话框。在任何给定的时间，只有一个

open

道具的计算值应为真实值。对不起，您的意思是我应该使用不同的状态来控制对话框的每个状态吗？这取决于您。您的状态可以是一个字符串（或数字），然后是沿

open={myState===/*some value*/}

行的内容，而不是布尔值。无论哪种方式，您都需要确保不要同时打开两个对话框。在任何给定时间，只有一个

open

道具的计算结果应为真实值。

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

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