React Hook Form中处理null默认值导致的脏标记问题

问题背景

在使用React Hook Form进行表单开发时，开发者可能会遇到一个特殊场景：当表单字段的默认值为null时，通过setValue方法将字段值重置为null会导致脏标记(dirtyFields)出现不一致的行为。这个问题同样会出现在默认值为undefined或NaN的情况下。

问题现象

具体表现为：

1. 当字段默认值为null时，使用setValue(null)重置字段值
2. 该字段会被错误地标记为脏字段(dirty)
3. 而同样的操作，对于默认值为空字符串("")的字段则表现正常

技术分析

React Hook Form的脏标记机制是通过比较当前值与默认值来判断字段是否被修改过。在内部实现上，对于null、undefined和NaN这些特殊值的比较可能存在一些边界情况处理不足。

解决方案

推荐方案：使用reset方法

最规范的解决方式是使用reset方法来重置表单状态：

const { reset } = useForm({
  defaultValues: { firstName: null, lastName: "" }
});

const handleClear = () => {
  reset({ firstName: null, lastName: "" });
};

reset方法会正确重置整个表单状态，包括脏标记。

特殊情况处理

当reset方法不能满足需求时（例如需要保留部分字段的脏状态），可以考虑以下替代方案：

1. 避免使用null作为默认值，改用空字符串或其他占位符
2. 对于必须使用null的场景，可以自定义脏标记逻辑
3. 使用Controller组件配合useState来管理特殊值的输入状态

最佳实践建议

1. 在表单设计中，尽量避免使用null作为默认值
2. 对于可选字段，推荐使用空字符串("")作为默认值
3. 当必须处理null值时，考虑使用Controller组件
4. 重置表单时优先使用reset方法

总结

React Hook Form在处理特殊默认值(null/undefined/NaN)时的脏标记机制存在一些边界情况。开发者应当了解这些限制，并根据实际需求选择合适的解决方案。对于大多数场景，使用reset方法重置表单是最可靠的方式；对于特殊需求，则可以考虑自定义实现或改变默认值策略。