react-hook-form调用reset()未恢复defaultValues反而清空表单如何解决？

1. 优先检查自定义输入组件的绑定逻辑 #

你的Input和SplitInput自定义组件没有和react-hook-form的状态做绑定，这是触发该问题最常见的原因：

react-hook-form的reset方法只会修改库内部维护的表单状态，如果你没有把输入组件的value和rhf的状态关联、也没有绑定状态变更的回调，输入组件不会响应内部状态的更新，就会出现看起来被清空的情况。

解决方式：

• 若自定义输入组件是原生输入框的简单封装，直接在组件上绑定register返回的属性即可：
  渲染普通Input的位置修改为：

  <Input
    disabled={ isSubmitting }
    error={ errors?.[field?.name]?.message }
    key={ field?.name }
    { ...field }
    { ...formMethods.register(field.name) }
  />
  

  数组类型的SplitInput同理，给每个子项都加上{...formMethods.register(splitField.name)}绑定。
• 若你的自定义组件是受控组件（内部自己维护value状态），则需要用Controller组件包裹做受控绑定。

2. 检查defaultValues的传入时机 #

useForm只会在组件初始化的时候读取一次传入的defaultValues，如果你的defaultValues是父组件异步请求拿到之后再传入的（比如接口返回的用户数据），那组件初始化的时候defaultValues是空值，后续props更新也不会自动更新rhf的默认值。

解决方式二选一即可：

• 父组件加条件渲染，等拿到完整的defaultValues之后再渲染FormBasicInfo组件：

  // 父组件渲染逻辑
  {userInfo && <FormBasicInfo defaultValues={userInfo} onSubmit={handleSubmit} />}
  

• 在FormBasicInfo中加useEffect监听defaultValues变化，手动更新默认值：

  useEffect(() => {
    if (defaultValues) {
      reset(defaultValues)
    }
  }, [defaultValues, reset])
  

3. 修正重置调用逻辑 #

等以上两个问题修复后，你直接调用无参的reset()就会自动恢复到最近一次设置的默认值，不需要手动传defaultValues参数：

const handleReset = () => {
  reset() // 自动恢复为初始化的defaultValues，或者最近一次reset传入的默认值
}

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