React Hook Form嵌套PrimeReact表格表单提交时输入值异常

你遇到的核心问题是React Hook Form(RHF)没有正确追踪表格中预加载和手动输入的值，原因在于默认值未初始化、字段路径错误以及手动干预了RHF的值管理逻辑。以下是具体修复步骤：

1. 初始化表单默认值 #

父组件中必须将API返回的表格数据传入useForm的defaultValues，让RHF知晓这些预加载数据的存在，否则无法追踪它们：

// Parent.js
const methods = useForm({
  mode: 'onChange',
  defaultValues: {
    parent1: '',
    parent2: '',
    data: formPreload || [] // 把API返回的表格数据作为data字段的初始值
  }
})

2. 修正字段注册路径 #

ChildTable中register的路径格式错误，RHF中数组字段的正确路径应为data[行索引].字段名，而非你写的data.字段名[行索引]。同时要移除手动设置的value和name属性——RHF会通过register自动管理这些，手动设置会导致值追踪失效：

// ChildTable.js
const elColumns = columns.map((col) => {
  return (
    <Column
      key={col.field}
      field={col.field}
      body={(row, props) => {
        // 正确的字段路径：数组索引在前，字段名在后
        const fieldPath = `data[${props.rowIndex}].${col.name}`;
        return (
          <InputText
            {...register(fieldPath)}
            disabled={col.isReadOnly}
            type="text"
            id={`${col.name}-${props.rowIndex}`} // 给ID添加索引避免重复
          />
        )
      }}
      className={col.className}
      header={col.header}
      style={col.style}
    />
  )
})

3. 用useFieldArray的fields作为表格数据源 #

PrimeReact Table的数据源应该使用useFieldArray返回的fields，而非外部传入的data——因为fields是RHF管理的数组状态，能保证和表单数据同步：

// ChildTable.js
return (
  <Table
    value={fields} // 使用useFieldArray的fields作为表格数据
    // 其他表格属性...
  >
    {elColumns}
  </Table>
)

问题根源总结 #

• 未设置defaultValues：RHF无法识别预加载的表格数据，提交时自然返回undefined。
• 字段路径错误：错误的路径导致RHF找不到对应的表单字段，手动输入的值无法被正确收集。
• 手动设置value：覆盖了RHF的自动值管理，导致输入值无法被追踪，提交时返回空字符串。

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