React Hook Form调用reset()重置表单后setValue功能异常问题

问题根因 #

该问题出现在React Hook Form v7.10.1版本中，本质是reset方法的状态重置逻辑和setValue的默认更新规则不匹配导致：

1. 执行reset方法时，会重写表单内部的默认值快照，同时重置所有字段的touched、dirty状态标记
2. setValue默认会对传入的新值和表单当前存储的字段值做全等比较，如果判定值相等，会跳过状态更新和重渲染。reset执行后如果你的documentDate新值和重置后的默认值被判定为相等，就会出现更新不生效的现象。

修复方案 #

你可以任选以下适配方案解决问题：

方案1：setValue添加强制更新配置 #

在调用setValue更新documentDate时，显式传入第三个配置参数，强制触发表单状态更新：

setValue('documentDate', targetDate, {
  shouldDirty: true,
  shouldTouch: true,
  // 如需同步触发字段校验可额外添加 shouldValidate: true
})

方案2：reset调用时补全全量默认值 #

下拉框变更触发reset时，不要只传入部分字段的默认值，要将documentDate也纳入重置的默认值配置中，保证表单内部快照和业务逻辑预期一致：

reset({
  transactionDate: defaultTransactionDate,
  documentDate: defaultDocumentDate,
  // 补充其他表单字段的默认值
})

方案3：升级React Hook Form版本 #

该异常逻辑已经在v7.39.0及以上的版本被官方修复，官方调整了reset后的字段值比较逻辑，避免了同值误判跳过更新的问题，项目允许升级依赖的情况下可以选择该方案。

其他注意事项 #

• 不要给documentDate字段的register配置添加disabled属性，如果需要禁止用户编辑，改用readOnly属性，setValue默认不会更新标记为禁用的字段值
• 如果你是在useEffect中监听transactionDate变化来触发更新，要确保useEffect的依赖数组包含最新的setValue引用，避免闭包陷阱导致拿到旧的setValue方法

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