React Hook Form使用reset重置Controller字段到默认值报错如何解决

报错原因 #

你在reset的参数里直接写了selectedBirthMonth，这是你给Controller字段设置的name字符串，不是你声明过的JS变量，运行时找不到该变量自然抛出未定义错误。

重置功能修复方案 #

针对回到首次渲染默认状态的需求，有两种可行写法：

方案1（推荐，react-hook-form v7及以上版本适用） #

使用自带的resetField方法，直接传入字段名的字符串即可，会自动匹配该字段的defaultValue完成重置：

<input
  style={{ display: "block", marginTop: 20 }}
  type="button"
  onClick={() => resetField("selectedBirthMonth")}
  value="Reset with values"
/>

方案2（兼容旧版本） #

如果使用reset方法，需要传入对应字段的键值对对象，值填你一开始给该字段设置的默认值selectedMonth即可：

<input
  style={{ display: "block", marginTop: 20 }}
  type="button"
  onClick={() => reset({ selectedBirthMonth: selectedMonth })}
  value="Reset with values"
/>

额外注意事项 #

你当前在Controller的render回调函数内直接调用useEffect不符合React的Hook调用规则，Hook只能在组件的最顶层调用，不能内嵌在其他函数、回调里。你可以把这部分监听逻辑移到组件外层，或者直接在SelectBirthMonth的onChange回调里处理值变化逻辑，避免后续出现运行异常。

后续兄弟组件联动重置实现 #

如果之后需要根据兄弟组件的值触发该字段重置，只需要在监听兄弟组件值的useEffect中调用上面的resetField("selectedBirthMonth")逻辑即可，不需要额外调整字段配置。

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