編集画面で React-Hook-Form を利用する

はじめに

react-hook-form と chakra-ui (v2) を使って編集フォームを作成していたところ、入力フィールドの値が編集できない 問題に遭遇しました。
ここでは、その原因と解決方法をまとめます。

問題のコード

まず、登録済みの情報が正しく表示されるか確認するために、value 属性に値を設定していました。

<Input
  placeholder="名前を入力"
  {...register('name')}
  isInvalid={!!errors.name}
  value={user?.name} // 問題の箇所
/>

これで登録済みの情報は表示されたのですが、編集ができない状態となりました。

解決方法

この部分はreact-hook-formのregisterが、valueやonChangeを自動で設定するため、valueを指定すると上書きされてしまいうまく動作しなくなるようです。
そこで、以下の２点を修正することで解決することができました。

1. value属性を削除

<Input
  placeholder="名前を入力"
  {...register('name')}
  isInvalid={!!errors.name}
  // value属性を削除
/>

2. setValueで初期値をセット

const { register, setValue } = useForm(...);

// useEffect内でデータロード後に値をセット
useEffect(() => {
  const fetchData = async () => {
    const userData = await getUserById(id);
    setValue('name', userData.name); // nameに値をセット
    ...
  };
  fetchData();
}, [id, setValue]);

これだけで、既存のデータをフォームに反映しつつ、入力もできるようになります！

最後に

react-hook-formを使う際は、入力フィールドにvalue属性を指定せずに、useFormのsetValueを利用することを学びました。
他にもdefaultValuesを利用する方法もあるようですが、こちらは初期登録時に利用することが推奨されています。
それぞれ適切な場面で使い分けていきたいと思います。

参考サイト

• registerについて
  https://react-hook-form.com/docs/useform/register

• setValueについて
  https://react-hook-form.com/docs/useform/setvalue