Блог

Этот вопрос касается 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 с id s из "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. Когда первые две строки регистрируются в консоли, я вижу, что файл успешно загружен в компонент bar на долю секунды, но затем:
2. Вторые две строки регистрируются в консоли, и состояния компонентов foo и bar очищаются. Оба FILEPOND потеряли свои файлы и снова пусты.

Почему это происходит и как я могу это исправить? Поведение, которое я хочу: иметь несколько отдельных FILEPOND, которые отслеживают разные файлы в разных частях состояния. Конечный пользователь должен иметь возможность загружать файлы во все из них.

Я опубликовал ту же проблему на Github, и на нее был дан ответ: https://github.com/pqina/react-filepond/issues/153

Это был не сбой с Filepond, а скорее логическая ошибка, которую я допустил с состоянием реакции. Пожалуйста, смотрите Объяснение ресурсы здесь: https://github.com/pqina/react-filepond/issues/153#issuecomment-705948028

(Большая благодарность пользователю Github sweetliquid за помощь.)