React Hook Form Controller返回undefined：组件数组无法传入表单求助

以下是针对你遇到的表单数组字段提交返回undefined、Controller组件无效问题的具体排查和解决步骤：

• 核对 Controller 核心配置
  务必保证 Controller 的 name 属性与表单数组字段的路径完全匹配（比如动态数组要写成 arrayField[${index}].key 这种格式），同时在 render 回调里正确绑定 value 和 onChange：

  <Controller
    name="userHobbies"
    control={control}
    render={({ field: { onChange, value } }) => (
      <HobbySelector onChange={onChange} selectedHobbies={value} />
    )}
  />
  

  要是用了动态数组，name 必须包含对应项的索引，建议配合 useFieldArray 生成合法的字段名。

• 用 useFieldArray 管理动态数组
  手动维护数组状态很容易出现表单不同步的问题，推荐用 React Hook Form 内置的 useFieldArray 来处理数组字段，它会自动完成字段注册、增删同步：

  const { fields, append, remove } = useFieldArray({
    control,
    name: 'userHobbies'
  });
  
  // 遍历渲染数组项
  {fields.map((item, index) => (
    <Controller
      key={item.id}
      name={`userHobbies[${index}].name`}
      control={control}
      render={({ field }) => <input {...field} />}
    />
  ))}
  

• 确保自定义组件的状态同步
  如果你封装了独立的数组选择组件，组件内部的状态更新必须同步触发表单的 onChange。比如组件用 useState 维护选中项，每次更新都要调用传入的 onChange 把最新数组传递给表单，不能只更新组件内部状态。

• 验证表单字段注册状态
  提交前可以调用 getValues() 打印当前表单的所有值，确认数组字段是否真的未被注册。如果 getValues('userHobbies') 返回 undefined，说明字段完全没和表单绑定，要重新检查 Controller 或 register 的配置。

• 针对你仓库代码的重点排查
  从提供的示例仓库来看，需要重点确认：

  • 步骤组件中的 Controller 是否正确传入了父表单的 control 对象
  • 数组组件的 onChange 事件是否真正触发了表单字段的更新
  • 表单初始化时是否给数组字段设置了默认值（比如 defaultValues: { userHobbies: [] }）

内容的提问来源于stack exchange，提问作者Николай Миров