React hook 表单不观察数组字段中的字段

Question

我的反应挂钩表单中有一个字段数组，其中有一个复选框字段。我想观看该字段，但我只能观看整个数组字段，如下所示：

\n

const Period = ({ item, index, datepicker }) => {\n    const { control } = useFormContext<InntektFormValues>();\n    const value = useWatch({\n        control,\n        name: "incomes",\n    });\n\n\n    return value[index].selected datepicker : <div className="min-w-[160px]"></div>;\n};\n

\n

这是我映射字段数组的地方：

\n

export const IncomeTable = () => {\n    const { control } = useFormContext<IncomeFormValues>();\n    const incomeField = useFieldArray({\n        control,\n        name: "incomes",\n    });\n\n   \n    return ({incomes.fields.map((item, index) => (\n                    <TableRowWrapper\n                        key={item.id}\n                        cells={[\n                            <Period\n                                item={item}\n                                index={index}\n                                datepicker={\n                                    <FormControlledDatePicker\n                                        key={`incomes[${index}].from`}\n                                        name={`incomes[${index}].from`}\n                                        label="From"\n                                        placeholder="DD.MM.\xc3\x85\xc3\x85\xc3\x85\xc3\x85"\n                                        defaultValue={item?.from ?? null}\n                                        hideLabel\n                                    />\n                                }\n                            />,\n

\n

我试图只观看选定的字段而不是整个数组，如下所示：

\n

const Periode = ({ item, index, datepicker }) => {\n    const { control } = useFormContext<InntektFormValues>();\n    const value = useWatch({\n        control,\n        name: `incomes[${index}].selected`,\n    });\n

\n

但这会引发 Typescript 错误：

\n

\n

没有重载与此调用匹配。

\n

\n

为什么我不能只查看字段数组中的一个字段？

\n

Answer 1

您正在尝试访问未在react-hook-form中注册的.selected属性。RHFuseWatch监视注册字段的“值”属性，而不是“选定”属性。

这应该有效：

const Periode = ({ item, index, datepicker }) => {
    const { control } = useFormContext<InntektFormValues>();
    const value = useWatch({
        control,
        name: `incomes[${index}]`,
    });

我已经在此处的沙箱中构建了它，您可以在此处查看它（只需打开控制台并尝试附加更多字段，然后切换每个复选框，您将看到它仅记录第一个复选框值）。

如果这也不起作用，请将命名更改为 Incomes.[index] 而不是 Incomes[index]。