代码之家 › 专栏 › 技术社区 › FrankTheTank

ReactJS SubmissionError未捕获的承诺错误

redux-form form-submit promise reactjs

0

FrankTheTank · 技术社区 · 6 年前

嘿,伙计们,我一直在想办法解决这个问题,我有一段时间没有结果。我有一个表单,它通过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))
);

授权操作.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,理论上我希望这个错误在我的error prop的LoginForm中被更新,这样我就可以用一个内嵌的错误消息来更新dom。

问题是我不能从我的登录authAction中执行“throw new SubmissionError”。我假设这与未返回的promise(和/或)我如何使用handleSubmit方法有关。我四处找了一会儿,但什么也找不到。

谢谢各位。

1 回复 | 直到 6 年前

1

0

FrankTheTank 6 年前

为了解决这个问题,我在onFormSubmit方法中添加了一个catch(同时也删除了另一个不必要的方法),然后使用这个捕获到的错误来更新组件的状态(我添加了一个新的状态)。见下文:

 state = {
    error: null
  }

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

所以我的主要问题是我需要抓住这个错误,我在我的授权操作.jsx文件。理论上,我的东西应该和SubmissionError一起工作来更新错误属性,但事实并非如此,我只是通过添加一些带有错误字段的状态来解决这个问题,一旦我发现错误,我就会更新它。