React Hook Form中isSubmitted状态在values变化时被重置的问题分析

问题现象

在使用React Hook Form时，开发者可能会遇到一个看似奇怪的现象：当表单的values属性发生变化时，表单的isSubmitted状态会被意外重置。具体表现为：

1. 用户提交表单后，isSubmitted状态变为true
2. 当表单值(values)被外部更新时，isSubmitted状态自动重置为false
3. 这种行为在首次操作时特别明显，后续操作可能表现不一致

技术背景

React Hook Form是一个流行的React表单库，它提供了isSubmitted状态来跟踪表单是否已被提交。根据官方文档，isSubmitted状态应该在表单提交后保持为true，直到显式调用reset方法才会重置。

问题原因

实际上，当使用受控组件模式(通过values属性控制表单值)时，React Hook Form内部会在values变化时执行类似reset的操作。这是设计上的行为，因为values的变化可能意味着表单需要重置状态。

解决方案

React Hook Form提供了resetOptions配置项来控制这种重置行为。要保留isSubmitted状态，可以使用以下配置：

useForm({
  values,
  resetOptions: {
    keepIsSubmitted: true,
    // 其他保留选项
    keepDirtyValues: true,  // 保留用户交互过的字段
    keepErrors: true       // 保留验证错误
  }
})

最佳实践

1. 明确区分受控和非受控模式：如果不需要外部控制表单值，尽量避免使用values属性
2. 合理使用resetOptions：根据业务需求选择需要保留的状态
3. 状态一致性：理解表单状态(reset、submit等)之间的相互影响
4. 测试边界条件：特别是在values动态变化的场景下充分测试

总结

React Hook Form的这种设计实际上是为了保证表单状态的一致性。开发者需要理解values属性不仅影响表单值，还会触发内部的状态重置逻辑。通过合理配置resetOptions，可以精确控制哪些状态需要在values变化时保留，从而实现更灵活的表单控制。