启用event.preventDefault()/stopPropagation()时Firebase Auth出现网络错误

嘿，我来帮你拆解这个问题，核心是重复触发登录逻辑和表单默认行为处理不当导致的，咱们一步步来修复：

问题根源 #

先看你代码里的两个关键问题：

• 重复调用登录函数：你的<Button>组件同时设置了type="submit"和onClick={(event) => loginToAccount(event)}。点击按钮时，不仅会触发<Form>的onSubmit事件（已经绑定了loginToAccount），还会触发按钮自身的onClick事件，直接导致loginToAccount被执行两次。
• 表单默认提交行为逻辑混乱：原来的代码只在表单验证失败时阻止默认事件，验证成功时如果不注释那两行，就会触发表单默认提交（页面刷新）。虽然这时候你觉得能正常登录，但本质是页面刷新掩盖了问题——Firebase的请求可能在页面刷新前刚好完成，但这不是单页应用的正确做法；而当你启用preventDefault和stopPropagation时，页面不刷新了，但重复的登录请求会触发Firebase Auth的冲突，被封装成"网络错误"返回。

修复步骤 #

1. 移除按钮上的重复事件绑定 #

把<Button>的onClick属性删掉，因为type="submit"的按钮会自动触发表单的onSubmit事件，不需要额外绑定：

<Button variant="primary" type="submit" id="login-button">Login</Button>

2. 统一处理表单默认行为 #

不管表单验证是否通过，都应该阻止默认的表单提交行为（单页应用不能让页面刷新）。修改loginToAccount函数的逻辑：

const loginToAccount = (event) => {
  // 先阻止默认提交行为，避免页面刷新
  event.preventDefault();
  event.stopPropagation();

  // Form Validation Target
  const form = event.currentTarget;
  // Check Form Validity
  if (form.checkValidity() === false) {
    setValidated(true); // 标记验证失败，显示错误提示
  } else {
    setValidated(true);
    // 简化空值判断，非空即可
    if (email && password) {
      // Credentials
      const credentials = {
        email: email,
        password: password,
      };
      // Redux: Login Request
      dispatch(loginRequest(credentials, history));
    }
  }
};

为什么这样能解决问题？ #

• 移除按钮的onClick后，loginToAccount只会被调用一次，避免了重复向Firebase发送登录请求，也就不会触发冲突性的"网络错误"。
• 提前阻止默认行为，确保页面不会刷新，符合单页应用的逻辑，同时让Firebase的登录请求能完整执行。

这样修改后，你就能正常启用preventDefault和stopPropagation，不会再出现那个奇怪的网络错误了。

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