Значение поля React-hook-form теряется при свертывании, добавлении или удалении панели

Question

Я использую материал ExpansionPanel. Я пытаюсь добавить новые панели из нажатия кнопки «Добавить» и удалить панель из нажатия кнопки «Удалить», все работает нормально, проблема в том, что при раскрытии, сворачивании, добавлении или удалении панелей значение полей формы теряется. Я думаю, что это происходит из-за повторного рендеринга или refre sh.

Дайте мне знать, как мы можем реализовать вышеупомянутую функцию, чтобы пользователь мог легко перейти к любой панели, добавить некоторые детали оттуда и перейти к другой панели и добавьте некоторые детали, но при добавлении деталей из одной панели в другую, значение должно быть там, если пользователь снова перейдет на эту перикулярную панель.

Посмотрите на приведенный ниже пример кода

https://codesandbox.io/s/dhananajayx-3n73x?file= / src / App. js: 146-160

Любые усилия высоко ценятся

Answer 1

React Hook Form автоматически удаляет значение при удалении ввода из дерева DOM, в основном unregister вызывается, когда ваши входы свернуты.

Решение

useEffect(() => {
  register('yourInput');
}, [register])


setValue('yourInput', 'data')

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

Answer 2

1. Отправить ссылку на компонент (см. Зарегистрировать поля для получения дополнительной информации)
2. Установить значение по умолчанию с предыдущим значением. в каждом компоненте повторного рендеринга используется значение по умолчанию в его входных данных.

посмотрите на this на codesandbox.