React Hook Form 中数字类型字段的脏状态检测机制解析

在使用 React Hook Form 进行表单开发时，开发者可能会遇到一个看似奇怪的现象：当数字类型字段的值从默认值修改后再改回默认值时，表单仍然会被标记为"脏"(dirty)状态。本文将深入分析这一现象背后的原因，并提供解决方案。

现象描述

假设我们有一个包含数字类型字段的表单：

const { register, handleSubmit, formState: { isDirty } } = useForm({
  defaultValues: {
    age: 200,  // 数字类型默认值
    name: "John" // 字符串类型默认值
  }
});

当用户将 age 字段从 200 改为 201 再改回 200 时，表单仍然保持"脏"状态，而字符串类型的 name 字段在类似操作后却能正确识别为"干净"状态。

根本原因

React Hook Form 内部将所有表单值都存储为字符串类型，即使我们在 defaultValues 中提供了数字类型的默认值。这种设计选择带来了以下影响：

1. 类型转换差异：当提供数字类型默认值时，React Hook Form 会将其转换为字符串存储
2. 严格相等比较：脏状态检测是基于严格相等(===)比较当前值与默认值
3. 隐式类型转换：数字 200 和字符串 "200" 在严格比较下不相等

解决方案

方案一：统一使用字符串类型

最简单的解决方案是在 defaultValues 中直接使用字符串类型的默认值：

const { register } = useForm({
  defaultValues: {
    age: "200",  // 改为字符串类型
    name: "John"
  }
});

方案二：使用 Controller 组件进行类型转换

对于更复杂的场景，可以使用 Controller 组件配合 transform 属性：

<Controller
  name="age"
  control={control}
  defaultValue="200" // 字符串类型默认值
  render={({ field }) => (
    <input
      {...field}
      type="number"
      onChange={(e) => field.onChange(Number(e.target.value))}
    />
  )}
/>

方案三：提交前进行数据转换

也可以在提交表单时进行类型转换：

const onSubmit = (data) => {
  const processedData = {
    ...data,
    age: Number(data.age)
  };
  console.log(processedData);
};

最佳实践建议

1. 保持类型一致性：在表单设计中，尽量保持前后端数据类型一致
2. 明确类型转换：在边界处(如表单提交时)进行明确的类型转换
3. 考虑使用验证库：结合如 Yup 或 Zod 等验证库，可以更好地处理类型转换问题
4. 文档阅读：仔细阅读 React Hook Form 文档中关于值处理和类型转换的部分

通过理解 React Hook Form 内部的值处理机制，开发者可以更好地设计表单逻辑，避免因类型问题导致的意外行为。