🙄

useFieldArrayを使った時に型推論が効かない

2024/06/12に公開
  • react-hook-form v7.45

useFieldArrayを使ってネストされたフォームを作成すると、型推論が正しく行われないケースがある

バリデーションスキーマを共有していても、ネストしたnameを指定するのと、直接nameを指定するのとで型推論が何故か変わる

const { fields, append } = useFieldArray({name: `test.${index}.keyValue`})

append({
	key1: value1 // typescript error (wrong type assigned)
})
const { fields, append } = useFieldArray({name: `keyValue`})
append({
	key1: value1 // correctly typed
})

https://github.com/react-hook-form/react-hook-form/issues/5318

https://github.com/react-hook-form/react-hook-form/issues/7567

v8では見直すとのこと。

回避策

  • キャストする
  • @ts-ignore

キャストする

メンテナーのコメントにある方法

const { fields } = useFieldArray({name: `test.${index}.keyValue` as 'test.0.keyValue'})

私が試したケースでは効かなかった

Discussion