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。

问题是我无法从登录authAction中执行“引发新的SubmissionError”。我假设这与未返回的诺言有关（和/或）我使用handleSubmit方法的方式。我环顾了一段时间，但什么也无法工作。

谢谢大家。

Answer 1

要解决此问题，我在onFormSubmit方法中添加了一个catch（同时还删除了其他不必要的方法），然后使用捕获到的错误来更新组件的状态（我添加了一个新状态）。参见下文：

 state = {
    error: null
  }

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

所以我的主要问题是我需要捕捉抛出在authActions.jsx文件中的错误。从理论上讲，我的东西应该与SubmissionError一起工作以更新错误道具，但事实并非如此，因此我通过添加一些带有错误字段的状态来解决该问题，一旦发现错误，我就进行更新。