Этот вопрос касается Filepond в ReactJS. Документация по файлоунду здесь: 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" и "bar". Во-первых, когда я загружаю файл в "foo" FilePond, консоль регистрирует:
Updating filepond: foo
Updating filepond: foo
И я правильно вижу загруженный файл в компоненте FilePond, хотя не понимаю, почему он обновляется дважды. [Отредактируйте, чтобы добавить: Ни один из других компонентов формы (ввод, текстовое поле, флажок и т.д.) не обновляется дважды, когда я console.log обновления, они регистрируются только один раз.] Затем я пытаюсь загрузить изображение в "bar" FilePond. Я получаю это:
Updating filepond: bar
Updating filepond: bar
Updating filepond: foo
Updating filepond: bar
Вышеупомянутое на самом деле происходит в быстрой последовательности:
- Когда первые две строки записываются в консоль, я вижу, что файл успешно загружен в компонент панели на долю секунды, но затем:
- Вторые две строки записываются в консоль, и состояния компонентов foo и bar очищаются. Оба FilePonds потеряли свои файлы и снова пусты.
Почему это происходит и как это исправить? Я хочу следующее: иметь несколько отдельных FilePonds, которые отслеживают разные файлы в разных частях штата. Конечный пользователь должен иметь возможность загружать файлы во все из них.
