React Hook Form 中处理 null 值导致的扁平化异常问题分析

问题背景

在 React Hook Form 7.53.2 版本中，当表单的默认值(defaultValues)或提交时的表单值包含 null 值时，表单提交过程会出现异常。这个问题的根源在于 JavaScript 的类型系统特性与表单数据扁平化处理的交互方式。

技术细节解析

问题的核心在于 React Hook Form 内部的数据扁平化处理逻辑。表单数据在提交前会经过一个扁平化(flatten)过程，这个过程中会递归处理对象类型的值。然而，JavaScript 中有一个著名的特性：

typeof null === "object" // 返回 true

这个特性导致了扁平化处理逻辑中的类型判断出现了偏差。在当前的实现中，代码使用类似 isObjectType(obj[key]) 的判断来检测是否需要递归处理对象属性，但没有考虑到 null 值的特殊情况。

问题复现场景

当表单中存在以下结构的数据时，就会触发这个问题：

{
  name: "John",
  address: null,
  details: {
    age: 30
  }
}

处理逻辑会尝试将 address 字段当作普通对象进行递归处理，但实际上 null 并不是一个可遍历的对象，从而导致异常。

解决方案分析

正确的处理方式应该是在进行对象类型检查时，显式地排除 null 值。修改后的类型检查应该类似于：

function isObjectType(value) {
  return typeof value === "object" && value !== null;
}

这种修改既保持了原有功能的完整性，又避免了 null 值导致的异常情况。

对开发者的影响

这个问题会影响以下场景的开发：

1. 使用 API 返回数据作为表单默认值，且 API 可能返回 null 值的场景
2. 动态表单中某些字段可能被显式设置为 null 的情况
3. 表单重置操作中可能引入 null 值的场景

最佳实践建议

为了避免类似问题，开发者在使用 React Hook Form 时应注意：

1. 对可能为 null 的 API 数据进行预处理，转换为空对象或空字符串
2. 在自定义表单组件中处理 null 值的边界情况
3. 保持表单数据结构的稳定性，避免动态变化的数据类型

总结

这个问题展示了 JavaScript 类型系统特性在实际开发中的影响，也提醒我们在编写递归处理逻辑时需要特别注意边界条件。React Hook Form 团队已经修复了这个问题，但理解其背后的原理对于开发者处理类似场景仍有重要价值。