添加链接
link管理
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接

I get a "Type string is not assignable to never" Typescript error with the following application of useForm icw. useFieldArray :

type MyValues = {
  vals: number[];
function MyForm() {
  const { control } = useForm<MyValues>();
  useFieldArray({ control, name: 'vals' });

See also: https://stackblitz.com/edit/react-ts-hqumgu

What is the correct type usage for useFieldArray?

You can't do field arrays of non-object type, looking at useFieldArray name type; FieldValues is Record<string, any>

export declare const useFieldArray: <TFieldValues extends FieldValues = FieldValues, TFieldArrayName extends import("./types").ArrayPath<TFieldValues> = import("./types").ArrayPath<TFieldValues>, TKeyName extends string = "id">(props: UseFieldArrayProps<TFieldValues, TFieldArrayName, TKeyName>) => UseFieldArrayReturn<TFieldValues, TFieldArrayName, TKeyName>;

So, you probably should do

type MyValues = {
  vals: { value: number }[];
        

You can't do field arrays of non-object type, looking at useFieldArray name type; FieldValues is Record<string, any>

export declare const useFieldArray: <TFieldValues extends FieldValues = FieldValues, TFieldArrayName extends import("./types").ArrayPath<TFieldValues> = import("./types").ArrayPath<TFieldValues>, TKeyName extends string = "id">(props: UseFieldArrayProps<TFieldValues, TFieldArrayName, TKeyName>) => UseFieldArrayReturn<TFieldValues, TFieldArrayName, TKeyName>;

So, you probably should do

type MyValues = {
  vals: { value: number }[];

const Admin = () => {
const [files, setFiles] = useState([]);
const { register, control, handleSubmit, formState: { errors }} = useForm();

const { fields, remove, append } = useFieldArray(
control,
name: "variations",

I also tried this:

type FormValues = {
title: String;
sub_title: String;
slug: String;
short_description: String;
long_description: String;
dimensions: String;
weight: String;
stock: String;
imageUrl: String;

'name' gets error saying: Type '"variations"' is not assignable to type '"products"'.ts. The expected type comes from property 'name' which is declared here on type 'UseFieldArrayProps<FormValues, "products", "id">'

I dont know what it means.

@Moshyfawn It worked! This is my final code. Is it ok how I did it?

type FormValues = {
  products: {
    title: String;
    sub_title: String;
    slug: String;
    short_description: String;
    long_description: String;
    dimensions: String;
    weight: String;
    stock: String;
    imageUrl: String;
  variations: {
    option_name: String;
    option_sku: String;
    option_qty: String;
const Admin = () => {
  const [files, setFiles] = useState([]);
  const {
    register,
    control,
    handleSubmit,
    formState: { errors },
  } = useForm<FormValues>();
  const { fields, append, remove } = useFieldArray<FormValues>({
    control,
    name: "variations",
        

@Moshyfawn just wondering about something you said "since RHF doesn't accept flat arrays (array of non-object types: string, number, etc.)"

So if I pass this type as my "", is wrong, right? :

short_description: string[];

In that case, I need to always make my type as follow? :

  short_description: {
    item: string;

just wondering because I then had to update my Mongoose DB schema from type to object[] and also my react .map() functions to render each item of short_description...

Couldnt find info about this in the RHF docs

Yep, RHF needs to store the id field on the field's object to track the fields in the array. So, the field's shape should be of type object

short_description: {
  item: string
}[]

is correct

Ok thank you for clarifying, that is why it was complaining so much when I set it up as an Array, I re-configured my DB schema, now I think everything works fine. Do you recommend any available course on React-Hook-Form? I really want to learn it, just started with it but I have to improve my skills with RHF