React Hook Form 中如何设置全局表单错误

在表单开发过程中，我们经常会遇到需要显示全局错误而非特定字段错误的情况。React Hook Form 作为流行的表单管理库，提供了灵活的错误处理机制，包括设置全局表单错误的功能。

全局错误的应用场景

全局表单错误通常出现在以下情况：

1. 服务器端验证失败但无法关联到特定字段
2. 网络请求失败（如服务器无响应）
3. 表单提交过程中出现未知错误
4. 业务逻辑验证失败（如用户权限不足）

设置全局错误的方法

React Hook Form 通过 setError 方法支持全局错误设置。使用时需要将 root 作为错误键名：

const { setError } = useForm();

// 设置全局错误
setError('root', {
  type: 'server',
  message: '服务器暂时不可用，请稍后再试'
});

全局错误的特性

1. 非持久性：全局错误不会随表单提交而自动保留，每次提交后需要重新设置
2. 独立于字段错误：不会影响特定字段的错误状态
3. 灵活的类型定义：可以自定义错误类型便于错误分类处理

实际应用示例

const onSubmit = async (data) => {
  try {
    const response = await submitForm(data);
    if (!response.ok) {
      throw new Error('提交失败');
    }
  } catch (error) {
    setError('root.server', {
      type: 'server',
      message: error.message
    });
  }
};

最佳实践建议

1. 为全局错误设计专门的UI展示区域
2. 考虑将网络错误与业务错误区分处理
3. 在错误解决后及时清除全局错误状态
4. 对敏感错误信息进行适当处理后再展示给用户

通过合理利用全局错误机制，可以显著提升表单的错误处理能力和用户体验，特别是在处理不可预见的服务器端错误时。