react-hook-form v7版本如何重置使用setValues设置的表单值？

react-hook-form 无参调用reset()时，只会将表单恢复到初始化时传入的defaultValues状态，你后续通过setValue设置的预填充值不会更新这个默认基准，所以才会出现重置后回到API预填值的情况。原生的form.reset()只会修改DOM上的输入值，不会同步更新react-hook-form内部维护的表单状态，因此修改不会生效。

方案1：使用react-hook-form带参数的reset方法（推荐） #

直接给reset方法传入你需要重置到的目标空值结构即可，完全符合react-hook-form的设计逻辑：

// 手动指定所有字段的空值，和你的表单字段结构保持一致
reset({
  'input-field-name': '',
  // 其他字段按需设置为空字符串或null
  'field-1': null,
  'field-2': ''
})

如果表单字段较多不想逐个枚举，可以用如下写法一次性生成空值结构：

// 获取当前所有注册字段的键，批量生成空值对象
const emptyForm = Object.fromEntries(
  Object.keys(getValues()).map(fieldKey => [fieldKey, ''])
)
reset(emptyForm)

优化提示：如果后续需要多次清空表单，建议你在首次做API预填充时就用reset代替setValue赋值，这样会直接更新reset的默认基准值，后续无参调用reset也会直接回到预填状态，需要清空时再传空值参数即可：

// 预填API值时用reset代替setValue
reset({
  'input-field-name': 'value-got-from-api'
})

方案2：原生JS兜底实现 #

如果需要用原生方法实现，要同时同步DOM值和react-hook-form的内部状态：

const form = document.getElementById('myform')
// 先重置DOM上的输入内容
form.reset()
// 遍历所有表单元素，同步更新react-hook-form的内部状态
Array.from(form.elements).forEach(item => {
  if (item.name) {
    setValue(item.name, '')
  }
})

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