Next.js中react-hook-form useFieldArray动态表单不显示问题求助

以下是针对该问题的常见排查和解决步骤：

1. 确保在客户端组件中使用 #

react-hook-form 的所有 hooks 仅支持客户端组件，若你的组件是 Next.js 默认的服务器组件，需在文件顶部添加 'use client' 指令：

'use client';

import { useForm, useFieldArray } from 'react-hook-form';

2. 检查 useFieldArray 基础配置 #

• 必须为目标数组字段设置初始空数组的默认值：

  const { control } = useForm({
    defaultValues: {
      dynamicRows: [] // 这里的字段名要和 useFieldArray 的 name 完全匹配
    }
  });
  

• useFieldArray 必须传入 useForm 返回的 control，且 name 严格对应默认值中的数组字段：

  const { fields, append } = useFieldArray({
    control,
    name: 'dynamicRows' // 与 defaultValues 中的字段名一致
  });
  

3. 修正 fields 循环的渲染逻辑 #

• 循环渲染 fields 时，必须使用每个字段自带的 id 作为 React key，不能用数组 index（避免渲染异常）：

  {fields.map((item, index) => (
    <div key={item.id}>
      <input
        {...register(`dynamicRows[${index}].username`)}
        placeholder="用户名"
      />
      <input
        {...register(`dynamicRows[${index}].phone`)}
        placeholder="手机号"
      />
    </div>
  ))}
  

• 确认没有错误的条件渲染（比如误写 {fields.length > 0 && ...}，导致初始空数组时不显示区块）。

4. 检查 FormProvider 上下文传递（若使用） #

如果通过 FormProvider 跨组件传递表单上下文，需确保 control 正确传入 Provider，子组件中无需再传入 control：

// 父组件
const { control } = useForm({ defaultValues: { dynamicRows: [] } });

return (
  <FormProvider control={control}>
    <DynamicFormRows />
  </FormProvider>
);

// 子组件 DynamicFormRows
const { fields, append } = useFieldArray({ name: 'dynamicRows' });

5. 排查样式或布局问题 #

打开浏览器开发者工具，检查 useFieldArray 渲染的元素是否存在于 DOM 中：

• 若元素存在但不可见，排查是否有 display: none、visibility: hidden 或被其他元素覆盖的样式；
• 若元素不存在，回到前面的配置步骤检查是否有遗漏。

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