javascript React钩形:如何在TypeScript中使用带有多个控件和名称useFieldArray?

ffx8fchx  于 2022-12-02  发布在  Java
关注(0)|答案(1)|浏览(99)

我有一个字段数组组件,它处理一个数组值,这个数组值可以在不同的表单中嵌套在不同的层次上。我把表单控件和名称传递给它,以得到这个值。在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">'
r7s23pms

r7s23pms1#

将类属模型从<TControl extends Control<A> | Control<B>>变更为<TControl extends Control<A | B>>已修复问题:

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 | B>> {
  control: TControl;
  name: TControl extends Control<A> ? "items" : "data.items";
}

const ItemFormFields = <TControl extends Control<A | B>>({
  control,
  name,
}: ItemFormFieldsProps<TControl>) => {
  const { fields } = useFieldArray({
    control,
    name,
  });
};

相关问题