时间戳

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

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

问题描述

这个问题是关于 ReactJS 中的 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 实例，其中ids of"foo"和"bar". 首先，当我将文件上传到"foo"FilePond 时，控制台会记录：

Updating filepond:  foo
Updating filepond:  foo

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

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

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

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

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

标签： javascriptreactjsfilepond

解决方案

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

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

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

推荐阅读