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

Question

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

[编辑] 这里是一个独立的代码沙箱，仅使用相关代码重现该问题：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" 和 "bar"。首先，当我将文件上传到 "foo" FilePond 时，控制台记录：

Updating filepond:  foo
Updating filepond:  foo

我在 FilePond 组件中正确地看到了上传的文件，尽管我不明白为什么它会更新两次。 [编辑添加：None 其他表单组件（输入、文本区域、复选框等）在我 console.log 更新时更新两次，它们只记录一次。] 然后，我尝试上传图像到 "bar" FilePond。我明白了：

Updating filepond:  bar
Updating filepond:  bar
Updating filepond:  foo
Updating filepond:  bar

以上实际上是以下接连发生的事情：

当前两行记录到控制台时，我看到文件在一瞬间成功上传到栏组件，但随后：
后两行记录到控制台，并且清除了 foo 和 bar 组件的状态。两个 FilePonds 都丢失了他们的文件并且再次为空。

为什么会发生这种情况，我该如何解决？我想要的行为是：拥有多个单独的 FilePonds 来跟踪州不同部分的不同文件。最终用户应该能够将文件上传到所有这些。

Answer 1

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

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

（非常感谢 Github 用户 sweetliquid 的帮助。）

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

ReactJS FilePond - uploading to one FilePond component clears the state in other FilePond components in same page

javascript

reactjs

filepond