来自 event.preventDefault() 和 event.stopPropagation() 的 Firebase 身份验证网络错误？

Question

我在尝试登录时收到以下错误。电子邮件地址存在于 Firebase Auth 中，我可以登录，但奇怪的是，错误仅在 event.preventDefault() 和 event.stopPropagation() 时发生。这两行与注释“（UNCOMMENT AND ISSUE GOES AWAY）”一起列出。

可能的问题：

我的代码中是否还有其他遗漏或我在其他地方犯了错误？

错误：

错误：发生网络错误（如超时、连接中断或主机无法访问）。

Login.js

// Imports: Dependencies
import React, { useState } from 'react';
import { Button, Container, Form, Row, Col } from 'react-bootstrap';
import { useDispatch } from 'react-redux';
import { useHistory } from 'react-router-dom';

// Imports: Redux Actions
import { loginRequest } from '../../../src/redux/actions/authActions';

// Page: Admin Login
const Login = () => {

  // React Hooks: State
  const [ email, setEmail ] = useState('');
  const [ password, setPassword ] = useState('');

  // React Hooks: Redux
  const dispatch = useDispatch();

  // React Hooks: Bootstrap
  const [ validated, setValidated ] = useState(false);

  // React Hooks: React Router DOM
  let history = useHistory();

  // Login To Account
  const loginToAccount = (event) => {
    // Form Validation Target
    const form = event.currentTarget;

    // Check Form Validity
    if (form.checkValidity() === false) {
      // Cancels Event
      event.preventDefault();

      // Prevents Bubbling Of Event To Parent Elements
      event.stopPropagation();
    }
    else {
      // Validate Form
      setValidated(true);

      // Check If Fields Are Empty
      if (
        email !== ''
        && password !== ''
        && email !== null
        && password !== null
        && email !== undefined
        && password !== undefined
      ) {
        // Credentials
        const credentials = {
          email: email,
          password: password,
        };

        // Redux: Login Request
        dispatch(loginRequest(credentials, history));

        // // Cancels Event (UNCOMMENT AND ISSUE GOES AWAY)
        // event.preventDefault();

        // // Prevents Bubbling Of Event To Parent Elements (UNCOMMENT AND ISSUE GOES AWAY)
        // event.stopPropagation();
      }
    }
  };

  return (
    <div>
      {/* <NavigationBar /> */}

      <Container id="login-container">
        <div id="login-inner-container">
          <div id="login-logo-container">
            <p id="login-title">Login</p>
          </div>

          <Form validated={validated} onSubmit={(event) => loginToAccount(event)}>
            <Form.Group controlId="login-email">
              <Form.Label className="form-field-title">Email</Form.Label>

              <Form.Control
                type={'email'}
                placeholder={'Email'}
                pattern={'[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$'}
                onChange={(event) => setEmail((event.target.value).toLowerCase())}
                value={email}
                maxLength={50}
                required
              />

              <Form.Control.Feedback type="invalid">Invalid email</Form.Control.Feedback>
            </Form.Group>

            <Form.Group controlId="login-password">
              <Form.Label className="form-field-title">Password</Form.Label>

              <Form.Control
                type={'password'}
                placeholder={'Password'}
                onChange={(event) => setPassword(event.target.value)}
                value={password}
                maxLength={40}
                required
              />

              <Form.Control.Feedback type="invalid">Required</Form.Control.Feedback>
            </Form.Group>

            <Button
              variant="primary"
              type="submit"
              id="login-button"
              onClick={(event) => loginToAccount(event)}
            >Login</Button>
          </Form>
        </div>
      </Container>
    </div>
  )
};

// Exports
export default Login;

Answer 1

您正在将 `` 函数注册为表单的提交处理程序：

<Form validated={validated} onSubmit={(event) => loginToAccount(event)}>

提交 HTML 表单时，其默认行为是将数据作为导航离开当前页面的请求发送到服务器。这里的逻辑是服务器处理请求，然后向客户端发送响应，然后它会呈现。这几乎就是 20 多年前 Web 的工作方式，因此它是 HTML 表单的默认行为。

因此，使用注释掉的 preventDefault，您的代码开始登录 Firebase，然后立即离开（很可能只是重新加载同一页面）。这会中断登录，这就是您看到错误消息的原因。

通过调用event.preventDefault()，您表明您希望阻止默认行为（将表单提交到服务器），因为您的代码正在处理它本身（通过调用loginRequest）。

调用 stopPropagation 会阻止浏览器为父 HTML 元素提供对事件采取行动的机会。通常不需要它来阻止表单提交，但在一定程度上取决于生成的 HTML。