ReactJS FilePond-上传到一个FilePond组件会清除同一页面中其他FilePond组件的状态

如何解决ReactJS FilePond-上传到一个FilePond组件会清除同一页面中其他FilePond组件的状态

这个问题是关于ReactJS中的Filepond的。 Filepond文档在这里：https://pqina.nl/filepond/docs/patterns/frameworks/react/

[EDIT]一个仅包含相关代码即可再现问题的独立代码沙箱位于此处：https://codesandbox.io/s/react-filepond-forked-cvck1?file=/src/App.js

我制作了这个组件，该组件是FilePond的包装：

export const FormFilePond = ({ id,state,updateFormState,...props }) => (
  <Box borderWidth={5} borderRadius={10} borderStyle='dashed'>
    <FilePond
      style={{'margin-bottom':0}}
      name={id}
      files={state}
      onupdatefiles={
        fileItems => {
          console.log("Updating filepond: ",id)
          updateFormState(id,fileItems.map(fileItem => fileItem.file))
        }
      }
      {...props}
    />
  </Box>
)

（console.log()调用将说明以下问题。）

我在同一页面上有多个FormFilePond实例，并且具有唯一的id。 value和updateFormState是在父组件中使用React.useState在其他位置定义的，因此这是一个受控组件。 updateFormState基本上在跟踪整个表单状态的对象中搜索键（id），并仅更新该键的值。就是说，我认为这可能是FilePond特有的问题，因为我还有其他几个表单输入组件，这些组件都使用相同的功能正确控制状态。仅仅是FilePond组件出现此问题。

<FormFieldComponent
   id={id}
   state={value}
   updateFormState={updateFormState}
   {...props}
 />

假设我有两个FilePond实例，其中id和"foo"的{​​{1}}个。首先，当我将文件上传到"bar" FilePond时，控制台将记录：

"foo"

尽管我不明白为什么文件更新两次，但我在FilePond组件中正确看到了上载的文件。 [编辑添加：在我进行控制台操作时，其他表单组件（输入，文本区域，复选框等）均未更新两次。记录更新，它们仅记录一次。]然后，我尝试将图像上载到Updating filepond: foo Updating filepond: foo FilePond。我明白了：

"bar"

上面实际上是连续发生的以下情况：

1. 将前两行记录到控制台后，我看到文件已成功上传到bar组件一秒钟，但随后：
2. 将后两行记录到控制台，同时清除foo和bar组件的状态。两个FilePond都丢失了文件，并且再次清空。

为什么会这样，我该如何解决？我想要的行为是：具有多个单独的FilePond，它们在状态的不同部分跟踪不同的文件。最终用户应该能够将文件上传到所有文件。

解决方法

我在Github上发布了同样的问题，并得到了答复：https://github.com/pqina/react-filepond/issues/153

这不是Filepond的小故障，而是我在React状态下犯的逻辑错误。请在此处查看说明和资源：https://github.com/pqina/react-filepond/issues/153#issuecomment-705948028

（非常感谢Github用户sweet液体的帮助。）