Ошибка Firebase Auth Network из event.preventDefault () и event.stopPropagation ()? - PullRequest
Новая
       3

Ошибка Firebase Auth Network из event.preventDefault () и event.stopPropagation ()?

0 голосов
/ 19 июня 2020

При попытке входа в систему появляется следующая ошибка. Адрес электронной почты существует в Firebase Auth, и я могу войти в систему, но, как ни странно, ошибка возникает только тогда, когда event.preventDefault() и event.stopPropagation(). Эти две строки перечислены с комментарием «(НЕКОМЕНДУЕМЫЕ И ПРОБЛЕМА УХОДЯТ)».

Возможные проблемы:

Есть ли что-то еще, чего мне не хватает в моем коде, или я сделал ошибку где-то еще?

Ошибка :

Ошибка: произошла сетевая ошибка (например, тайм-аут, прерванное соединение или недоступный хост).

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;

1 Ответ

1 голос
/ 19 июня 2020

Вы регистрируете свою функцию в качестве обработчика отправки для формы: 

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

Когда отправляется форма HTML, по умолчанию она отправляет данные на сервер в виде запроса. который уходит с текущей страницы. Лог c здесь заключается в том, что сервер обрабатывает запрос и отправляет ответ клиенту, который затем обрабатывает. Примерно так Интернет работал 20+ лет go, следовательно, это поведение по умолчанию для форм HTML.

Итак, с закомментированным preventDefault ваш код начинает входить в Firebase и затем сразу уходит (скорее всего, просто перезагружая ту же страницу). Это прерывает вход в систему, поэтому вы видите сообщение об ошибке.

Вызывая event.preventDefault(), вы указываете, что хотите предотвратить поведение по умолчанию (отправку формы на сервер), поскольку ваш код обрабатывает это сам (вызывая loginRequest).

Вызов stopPropagation останавливает браузер от предоставления родительским HTML элементам возможности действовать в соответствии с событием. Обычно это не требуется для предотвращения отправки формы, но немного зависит от сгенерированного HTML.

...