Предоставление initialValues ​​для массива в final-form-arrays приводит к изменению состояния для сброса всей формы, как я могу предотвратить это?

У меня есть форма, которая использует окончательные формы массива. Форма работает и проверка работает, однако, когда я делаю изменение состояния внутри компонента, он сбрасывает все мои значения.

Мне удалось воспроизвести проблему с тем же примером, который предоставляет реагирующая-окончательная-форма-массивы:

https://codesandbox.io/embed/react-final-form-field-arrays-om6p6

Я добавил кнопку для переключения состояния. По сути, просто попробуйте заполнить значения в форме, а затем измените состояние. Форма будет сброшена, и я не могу понять, почему это так. Если я удаляю initialValues, этого не происходит.

Кто-нибудь знает, почему это может быть?

Источник

1 ответ

2 проблемы.

  1. Вы передаете встроенный renderProp компоненту Form, это означает, что он создает новую функцию каждый раз, когда ваш компонент выполняет рендеринг, что приводит к сбросу формы. Решение состоит в том, чтобы переместить renderProp в функцию выше и передать ее, идеально запомнив с помощью useCallback.
  2. Как только вы исправите вышеприведенное, форма все равно будет сброшена Это потому, что вы передаете встроенный массив в initialValues. Это снова создаст новый массив каждый раз, когда ваш компонент рендерит, который сбрасывает вашу форму. Переместите его в переменную и передайте.

Это довольно распространенная ошибка новичка, вы должны прочитать о том, как реагирует проверка на равенство ссылок, чтобы выяснить, какие компоненты нужно перерисовать.

Исправленная версия: https://codesandbox.io/embed/react-final-form-field-arrays-c6hgu

Источник

Просто запомните свои initialValues ​​в стрелочной функции, а затем передайте их компоненту формы:

const initialValues = useCallback(() => {
    return {data: [{}]};
    // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

Передайте функцию в качестве свойства initialValues ​​вашего компонента формы.

Источник
Другие вопросы по тегам