React Hook FormでuseFieldArrayの初期化方法を間違っていた話。初期値はdefaultValuesで設定することReact Hook FormのuseFieldArrayは動的にフォームの入力項目を増減する必要がある場合にとても便利な機能です。 とても便利な機能なのですが、私は最初間違って使っていました。 正しい使い方を理解したので記事にまとめておこうと思います。 useFieldArrayの公式ドキュメントは下記を参照してください。 どう間違えたのか？ サンプルコードを交えて説明した方が理解しやすいので、サンプルコードに沿って説明します。 サンプルコードのバージョンは下記の通りです。 react: 18.2.0 react-hook-form: 7.43.0 例えば下記のようなデータをAPIで受け取り、valueの数だけテキストボックスを作成する画面を考えます。 import { useEffect } from 'react'; import { useFieldArray, useForm,
