Форма «Реагирующие крючки»: сбросить или установить значение при первом обновлении формы с реквизита?

#javascript #reactjs #react-hooks #react-hook-form

Вопрос:

Я нахожусь в дочернем компоненте, который получает customer поддержку от своего родительского компонента.

Поэтому я хочу обновить форму значениями , полученными из customer , поэтому я сделал это:

 useEffect(() => {
    let isMounted = true;
    if (isMounted) {
      reset({
        firstname: customer.firstname,
        lastname: customer.lastname,
        address: {
          street: customer.address.street,
          city: customer.address.city,
          country: customer.address.country,
        },
      });
    }

    return () => {
      isMounted = false;
    };
}, [customer, reset]);

 

но на самом деле я заметил, что он неправильно изменяет значения внутри address вложенного объекта ( street и city обновляется, country нет).

Однако, если я использую setValue , он соответствующим образом обновит значение. Поэтому мой вопрос таков: какой из reset() них setValue() следует использовать для данного конкретного случая и следует ли его использовать?

Спасибо

Комментарии:

1. можете ли вы привести пример живого кода?

Ответ №1:

В зависимости от вашего варианта использования, который вы должны использовать reset , и вы делаете там правильные вещи, но в соответствии с react-hook-form документацией может произойти выпадение/выбор страны в указанном ниже случае. (Прочитайте первую строку)

Для контролируемых компонентов, таких как React-Выберите компоненты, которые не содержат ref-опору, вам придется сбросить входное значение вручную с помощью setValue или подключить компонент через useController или контроллер.

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