React Hook Form 中数组字段错误聚焦问题的分析与解决方案

问题背景

在使用 React Hook Form 处理表单验证时，开发者经常会遇到数组字段的验证问题。一个典型场景是：当表单中包含动态数组字段时，提交验证失败后，系统应该自动聚焦到第一个错误的字段上。然而在实际应用中，我们发现 React Hook Form 的自动聚焦行为在数组字段中存在一些特殊情况。

问题现象

当表单提交验证失败时，React Hook Form 会自动聚焦到第一个错误的字段。但在处理数组字段时，会出现以下两种不同的聚焦行为：

1. 当数组为空时，系统正确地聚焦到"添加"按钮
2. 当数组中存在字段但验证失败时，系统仍然聚焦到"添加"按钮，而不是聚焦到实际出错的输入字段

这种不一致的行为会给用户带来困惑，特别是当表单较大时，用户无法快速定位到真正需要修正的字段。

技术原理分析

React Hook Form 的验证系统在设计上主要关注字段级别的错误报告。对于嵌套结构，其错误检查仅限于直接父级。这种设计在大多数情况下工作良好，但在处理数组字段时会出现一些特殊情况。

当数组字段验证失败时，React Hook Form 的错误处理机制会：

1. 首先检查数组字段本身是否有错误
2. 然后才会检查数组中的各个子字段

这种层级式的检查顺序导致了上述的聚焦行为不一致问题。系统会优先处理父级(数组本身)的错误，而不会深入到数组内部去查找具体的错误字段。

解决方案

针对这个问题，官方推荐使用 setFocus API 来自行管理错误聚焦行为。具体实现思路如下：

1. 在表单提交时捕获验证错误
2. 分析错误对象，确定第一个错误的字段路径
3. 使用 setFocus 方法手动设置焦点到正确的字段

这种方案虽然需要开发者编写额外的代码，但提供了最大的灵活性，可以精确控制聚焦行为，适应各种复杂的表单结构。

最佳实践建议

1. 对于简单的数组字段，可以接受默认的聚焦行为
2. 对于复杂的表单结构，建议实现自定义的错误处理逻辑
3. 在自定义处理时，考虑用户体验，确保焦点总是落在最需要用户注意的字段上
4. 对于大型表单，可以提供额外的错误提示，帮助用户快速定位问题

通过合理使用 React Hook Form 提供的 API，开发者可以构建出既强大又用户友好的表单验证体验。理解框架的设计哲学和限制条件，有助于我们更好地利用其优势，规避潜在的问题。