如何解决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"
上面实际上是连续发生的以下情况:
为什么会这样,我该如何解决?我想要的行为是:具有多个单独的FilePond,它们在状态的不同部分跟踪不同的文件。最终用户应该能够将文件上传到所有文件。
解决方法
我在Github上发布了同样的问题,并得到了答复:https://github.com/pqina/react-filepond/issues/153
这不是Filepond的小故障,而是我在React状态下犯的逻辑错误。请在此处查看说明和资源:https://github.com/pqina/react-filepond/issues/153#issuecomment-705948028
(非常感谢Github用户sweet液体的帮助。)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。