React中Ant Design Form提交错误凭证时页面重载问题咨询

问题出在登录请求失败时未正确捕获错误，导致浏览器触发了表单的默认提交行为。Ant Design Form默认会阻止表单默认提交，但如果onFinish回调中存在未捕获的Promise拒绝或同步错误，就会触发页面重载。

修复方案 #

1. 异步捕获错误（推荐） #

把onSubmit改成异步函数，用try/catch包裹请求逻辑，确保所有错误都被内部处理：

const onSubmit = async (values: LoginValues) => {
  try {
    await loginMutation.mutateAsync(values);
    handleLoginSuccess();
  } catch (error) {
    handleLoginFailure(error);
  }
};

2. 检查handleLoginFailure函数 #

确认你的handleLoginFailure没有重新抛出未处理的错误，比如：

const handleLoginFailure = (error: Error) => {
  // 这里写你的错误处理逻辑，比如显示错误提示
  console.error('登录失败:', error);
  // 不要在这里抛出未捕获的错误
};

3. 兜底：手动阻止表单默认提交（可选） #

如果前两种方法无效，可以在Form组件上添加onSubmit事件强制阻止默认行为：

<Form<LoginValues>
  name="loginForm"
  form={form}
  onFinish={onSubmit}
  onSubmit={(e) => e.preventDefault()}
  initialValues={{
    remember: false,
  }}
>

核心逻辑 #

Ant Design Form的onFinish仅在回调执行无错误时才会阻止默认提交。一旦回调中出现未捕获的错误，浏览器就会执行原生表单提交，导致页面重载。所以确保所有错误都被捕获处理是关键。

内容的提问来源于stack exchange，提问作者private_xoxo