带有属性名称的 useFieldArray 的打字稿问题

时间:2021-07-18 09:33:59

标签: javascript reactjs typescript forms react-hook-form

我对 useFieldArray 有以下打字稿问题。它在名称下的控制器无法识别:name={test.${index}.firstname}

That's where the error comes: controller.d.ts(18, 5): The expected type comes from property 'name' which is declared here on type 'IntrinsicAttributes & { render: ({ field, fieldState, formState, }: { field: ControllerRenderProps<Record<string, any>, ${string}|${string}.${string}|${string}.${number}>; fieldState: ControllerFieldState; formState: FormState<...>; }) => ReactElement<...>; } & UseControllerProps<...>'

然后在 defaultValue 下,item.name 和 item.value 都没有这些子项在 item 下不存在。

我该如何解决这个问题?

我的代码:https://codesandbox.io/s/stoic-frost-lpnwe?file=/src/components/BasicData.tsx

1 个答案:

答案 0 :(得分:0)

这里是官方文档中的解决方案。

https://react-hook-form.com/api/usefieldarray/

在打字稿部分:

<块引用>

对于嵌套字段数组,您必须按名称强制转换字段数组。

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

所以对于你的情况,名字应该是

name={`test.${index}.firstname` as `test.0.firstname`}

这里是the codesandbox for demo