👌
react-hook-formのuseFieldArrayのidは勝手に上書きされる件
はじめに
みなさん、こんにちは torihaziです
花粉症です。鼻がぴえんです。
結論
useForm定義時にapiを通じてbackendから取得してきた配列(itemsとする)を元にuseFieldArrayを使用し、その戻り値であるfieldsの各idと元々のitemsの各idは一致しない。
useFieldArrayはidを勝手に上書きする。
useFieldArray automatically generates a unique identifier named id which is used for key prop. For more information why this is required: https://react.dev/learn/rendering-lists
https://react-hook-form.com/docs/usefieldarray
例えば
fields.map((field,index)=> <Hoge id={field.id} key={field.id} />)
みたいにして描画した際に対応するindexのitemsのidとfieldsのidは一致しない。
そのため、各フォームが独立していてそのフォーム内で元々のidを使用したい場合、
form.getValues(`配列の名前.${index}.id`)
としなきゃダメ。
useFormのhandleSubmitを通せばその問題は気にしなくて良くなる
form.handleSubmit(
// onValid
(data) => {
update({
...data.items?.[index],
title: 値
};
},
)();
終わりに
追加可能フォームを作成し、各フォームが独立してsubmit可能であるようなものを作ってました。
update等もできるようにしたところ、そのidを指定してupdateできるようなものです。
最初はこれを知らずにいくらリクエストしても"Record Not Found"であり、そんなバカなと思ってbackendの全テーブルを検索したにも関わらず存在しないidと言われて萎えてました。
こういうことだったんですね。納得です。
Discussion