React useForm异常：formState.isDirty为true但dirtyFields为空

可能的原因 #

• 异步初始值导致状态不一致
  你给输入框用defaultValue={variable.value}赋值，但如果variable.value是异步加载（比如API请求、状态延迟更新），表单初始化时没拿到正确初始值。后续variable.value更新后，表单内部的初始值快照没同步，用户交互时字段值和旧初始值对比被标记为dirty，但dirtyFields的跟踪逻辑因为初始值的异步变化出现偏差，导致字段没被纳入dirtyFields。

• 状态订阅与渲染时机的问题
  React Hook Form的formState基于订阅机制，只有当组件实际使用到dirtyFields时，它才会被正确同步到当前渲染状态。Chrome控制台打印的可能是后续更新的快照，但组件没渲染dirtyFields时，它可能没完成同步。当你添加显示formState的代码后，组件因状态变化重新渲染，强制触发了dirtyFields的同步，所以状态恢复正常。

• 复杂表单的字段跟踪遗漏
  大型表单中如果存在动态卸载的字段、注册时name拼写错误或重复，可能会出现字段的dirty状态被计入整体isDirty（isDirty是所有字段dirty状态的或运算结果），但对应的字段条目没被正确记录到dirtyFields中。

解决建议 #

• 优先用useForm的defaultValues配置初始化表单，确保初始值在表单启动时就就绪：

  const { register, formState } = useForm({
    defaultValues: {
      value: variable.value
    }
  });
  

• 若初始值是异步获取的，用setValue在数据就绪后更新，并标记为未dirty：

  useEffect(() => {
    if (variable.value) {
      setValue('value', variable.value, { shouldDirty: false });
    }
  }, [variable.value, setValue]);
  

• 检查所有字段的注册逻辑，确保动态字段的name唯一、注册/卸载逻辑正确，避免状态残留。

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