React Hook Form useFieldArray.map无元素显示求助

针对你遇到的react-hook-form 7.27.1版本中，useFieldArray的fields.map无元素显示且无报错的问题，可按以下步骤排查解决：

• 确保组件在FormProvider范围内
  使用useFormContext的组件必须被FormProvider包裹，否则无法获取form实例，useFieldArray无法正常工作。示例代码：

  import { FormProvider, useForm } from "react-hook-form";
  
  function ParentComponent() {
    const methods = useForm({
      defaultValues: {
        items: [] // 必须初始化字段数组
      }
    });
  
    return (
      <FormProvider {...methods}>
        <FieldArrayComponent />
      </FormProvider>
    );
  }
  

• 检查defaultValues的初始化
  useForm的defaultValues中必须包含useFieldArray对应的字段，且初始值为数组（空数组也可）。如果未初始化该字段，useFieldArray无法识别，map自然无元素输出。

• 确认useFieldArray的name参数匹配
  useFieldArray的name属性必须与defaultValues中的字段名完全一致（包括大小写、拼写），比如defaultValues里是items，则useFieldArray需写useFieldArray({ name: "items" })。

• 手动触发字段初始化（适配旧版本bug）
  7.27.1版本存在useFieldArray与useFormContext配合的已知小问题，可在组件挂载时手动确保字段初始化：

  import { useFormContext, useFieldArray, register } from "react-hook-form";
  import { useEffect } from "react";
  
  function FieldArrayComponent() {
    const { setValue } = useFormContext();
    const { fields, append } = useFieldArray({ name: "items" });
  
    useEffect(() => {
      setValue("items", fields.length === 0 ? [] : fields);
    }, [setValue, fields.length]);
  
    return (
      <div>
        {fields.map((item, index) => (
          <input key={item.id} {...register(`items[${index}].value`)} placeholder="输入内容" />
        ))}
        <button onClick={() => append({ value: "" })}>添加项</button>
      </div>
    );
  }
  

• 升级react-hook-form版本
  7.27.1属于较旧版本，后续版本修复了大量useFieldArray相关bug，建议升级到最新稳定版后重试官方示例，执行命令：

  npm install react-hook-form@latest
  

内容的提问来源于stack exchange，提问作者superZcyan