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

Question

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

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

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

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

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

Answer 1

2 проблемы.

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

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

Фиксированная версия: https://codesandbox.io/embed/react-final-form-field-arrays-c6hgu