react-hook-form表单内动态增删项目如何注册输入项到主表单提交？

你现有代码已经单独用useState维护了完整的已添加套餐数组，不需要给临时输入的日期选择器、套餐输入框加register，有两种常用方案可以把这部分数据纳入主表单提交对象：

方案1：同步自定义状态到表单（适配你现有代码，改动最小） #

直接利用react-hook-form提供的setValue方法，把你维护的addedPackages数组同步到表单字段即可：

1. 先从useForm的返回值里拿到setValue：

const {
    control,
    register,
    handleSubmit,
    setValue, // 新增这一行
    formState: { errors },
  } = useForm<any>()

2. 每次修改addedPackages数组的逻辑后面，同步调用setValue更新表单对应字段：

• 新增套餐的addPackage方法里：写完setAddedPackages后加一行setValue('addedPackages', 新的数组值)
• 删除套餐的removePackage方法里：删除数组元素后调用setValue('addedPackages', 新的数组值)
• 清空的clearAll方法里：调用setValue('addedPackages', [])

完成后提交表单时，onSubmit拿到的data里会自动包含addedPackages字段，值和你维护的useState数组完全一致。

方案2：用react-hook-form原生能力托管动态字段（更规范，无需额外维护useState） #

如果你不想自己维护addedPackages的状态，可以直接用react-hook-form提供的useFieldArray管理动态字段：

1. 引入并初始化useFieldArray：

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

// 初始化表单时给动态字段设默认值
const {
    control,
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<any>({
    defaultValues: {
      addedPackages: [] // 动态字段的初始值
    }
  })

// 初始化动态字段管理器
const { fields, append, remove } = useFieldArray({
  control,
  name: 'addedPackages' // 和表单字段名对应
})

2. 替换原有状态操作逻辑：

• 新增套餐直接调用append(新的套餐对象)，不需要再调用setAddedPackages
• 删除套餐直接调用remove(索引)
• 清空直接循环调用remove或者重置表单字段

3. 渲染已添加套餐列表时，把原来的addedPackages.map换成fields.map即可。

这种方案所有动态数据都由react-hook-form托管，提交时会自动纳入data对象，不需要手动同步状态。

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