我有一个字段数组组件,它处理一个数组值,这个数组值可以在不同的表单中嵌套在不同的层次上。我把表单控件和名称传递给它,以得到这个值。在v7中,我不能正确地输入它。
这是我的代码的一个简化示例,它工作得很好,但引发了TS错误:
import { Control, useFieldArray } from "react-hook-form";
interface Item {
key: string;
}
interface A {
items: Item[];
}
interface B {
data: {
items: Item[];
};
}
interface ItemFormFieldsProps<TControl extends Control<A> | Control<B>> {
control: TControl;
name: TControl extends Control<A> ? "items" : "data.items";
}
const ItemFormFields = <TControl extends Control<A> | Control<B>>({
control,
name,
}: ItemFormFieldsProps<TControl>) => {
const { fields } = useFieldArray({
control,
^^^^^^^^
name,
^^^^^
});
};
对于control
,我遇到以下错误:
Type 'Control<A, any> | Control<B, any>' is not assignable to type 'Control<A, any> | undefined'.
Type 'Control<B, any>' is not assignable to type 'Control<A, any>'.
The types of '_subjects.state' are incompatible between these types.
Type 'FormStateSubjectRef<B>' is not assignable to type 'FormStateSubjectRef<A>'.
Type 'FormStateSubjectRef<B>' is not assignable to type '{ readonly observers: Observer<Partial<FormState<A>> & { name?: string | undefined; }>[]; subscribe: (value: Observer<Partial<FormState<A>> & { ...; }>) => Subscription; unsubscribe: Noop; }'.
Types of property 'observers' are incompatible.
Type 'Observer<Partial<FormState<B>> & { name?: string | undefined; }>[]' is not assignable to type 'Observer<Partial<FormState<A>> & { name?: string | undefined; }>[]'.
Type 'Observer<Partial<FormState<B>> & { name?: string | undefined; }>' is not assignable to type 'Observer<Partial<FormState<A>> & { name?: string | undefined; }>'.
Type 'Partial<FormState<A>> & { name?: string | undefined; }' is not assignable to type 'Partial<FormState<B>> & { name?: string | undefined; }'.
Type 'Partial<FormState<A>> & { name?: string | undefined; }' is not assignable to type 'Partial<FormState<B>>'.
Types of property 'defaultValues' are incompatible.
Type 'A | Readonly<{ items?: ({ key?: string | undefined; } | undefined)[] | undefined; }> | undefined' is not assignable to type 'B | Readonly<{ data?: { items?: ({ key?: string | undefined; } | undefined)[] | undefined; } | undefined; }> | undefined'.
Type 'A' is not assignable to type 'B | Readonly<{ data?: { items?: ({ key?: string | undefined; } | undefined)[] | undefined; } | undefined; }> | undefined'.ts(2322)
fieldArray.d.ts(8, 5): The expected type comes from property 'control' which is declared here on type 'UseFieldArrayProps<A, "items", "id">'
对于name
:
Type '"items" | "data.items"' is not assignable to type '"items"'.
Type '"data.items"' is not assignable to type '"items"'.ts(2322)
fieldArray.d.ts(6, 5): The expected type comes from property 'name' which is declared here on type 'UseFieldArrayProps<A, "items", "id">'
1条答案
按热度按时间r7s23pms1#
将类属模型从
<TControl extends Control<A> | Control<B>>
变更为<TControl extends Control<A | B>>
已修复问题: