ReactJS SubmissionError Необнаруженная ошибка в Promise

Question

Эй, ребята, я пытался выяснить эту проблему, которая у меня есть некоторое время, но безрезультатно. У меня есть форма, которая проверяет электронную почту и пароль через firebase, чтобы позволить человеку войти в систему, и, когда эта проверка не проходит, я хочу выдать ошибку обратно в мою форму, которая затем будет отображаться встроенной, чтобы пользователь знал, что вход в систему не выполнен. Моя проблема всякий раз, когда я сталкиваюсь с ошибкой, я выбрасываю ошибку:

Мой код выглядит следующим образом:

LoginForm.jsx

import React, { Component } from "react";
import { connect } from "react-redux";
import { withRouter } from "react-router-dom";
import { reduxForm, Field } from "redux-form";
import { Form, Button, Grid, Label } from "semantic-ui-react";
import { login } from "../authActions";
import TextInput from "../../../app/common/form/TextInput";

const actions = {
  login
};

class LoginForm extends Component {
  initiateLogin = values => {
    this.props.login(values, this.props.history);
  };

  onFormSubmit = values => {
    this.initiateLogin(values);
  };

  render() {
    const { error } = this.props;
    return (
      <Grid>
        <Grid.Column width={16}>
          <Form
            size="large"
            onSubmit={this.props.handleSubmit(this.onFormSubmit)}
          >
            <Field
              name="email"
              type="text"
              component={TextInput}
              placeholder="email"
            />
            <Field
              name="password"
              type="text"
              component={TextInput}
              placeholder="Password"
            />
            {error && (
              <Label basic color="red">
                {error}
              </Label>
            )}
            <Button className="loginBtn">Login</Button>
          </Form>
        </Grid.Column>
      </Grid>
    );
  }
}

export default withRouter(
  connect(
    null,
    actions
  )(reduxForm({ form: "loginForm" })(LoginForm))
);

authActions.jsx

import { SubmissionError } from "redux-form";
import { SIGN_OUT_USER } from "./authConstants";
import { closeModal } from "../modals/modalActions";

export const login = (creds, history) => {
  return async (dispatch, getState, { getFirebase }) => {
    const firebase = getFirebase();
    try {
      console.log("zero");
      await firebase
        .auth()
        .signInWithEmailAndPassword(creds.email, creds.password);
      console.log("first");
      dispatch(closeModal());
      console.log("second");
      history.push("/profile");
      console.log("third");
    } catch (error) {
      throw new SubmissionError({
        _error: "Login Failed"
      });
    }
  };
};

export const logout = () => {
  return {
    type: SIGN_OUT_USER
  };
};

Итак, при отправке формы я вызываю handleSubmit и передаю свой собственный метод, который затем вызывает один из моих методов authAction. Этот метод генерирует SubmissionError, если вход не работает, и теоретически я хочу, чтобы эта ошибка затем обновлялась в моей LoginForm в моей подпорке ошибки, чтобы я мог затем обновить dom с сообщением об ошибке в строке.

Проблема в том, что я не могу выполнить "выбросить новую SubmissionError" из моей авторизации при входе в систему. Я предполагаю, что это как-то связано с невозвращенным обещанием (и / или) того, как я использую свой метод handleSubmit. Я некоторое время оглядывался по сторонам, но ничего не мог заставить работать.

Спасибо, ребята.

Answer 1

Чтобы исправить проблему, я добавил перехват в свой метод onFormSubmit (при этом также удаляя другой ненужный метод), а затем использовал эту перехваченную ошибку, чтобы затем обновить состояние моего компонента (я добавил новое состояние). Смотрите ниже:

 state = {
    error: null
  }

  onFormSubmit = values => {
    this.props
      .login(values, this.props.history)
      .catch(err => this.setState({error: err.errors._error})) 
  };

Так что моей главной проблемой было то, что мне нужно было поймать эту ошибку, которую я выкидывал в моем файле authActions.jsx. И теоретически мои вещи должны работать с SubmissionError, чтобы обновить пропущенную ошибку, но это было не так, я решил эту проблему, просто добавив некоторое состояние с полем ошибки, которое я просто обновляю, как только улавливаю ошибку.