Redux-form实例提交中未处理的Promise拒绝

时间:2018-02-28 16:10:51

标签: javascript reactjs redux redux-form redux-thunk

我目前陷入了一个问题。我希望实现的是将错误消息从我的ApiClient返回到我的redux-form实例,以向最终用户显示消息。我正在编写一个简单的登录表单作为示例。

我的表格如下:

const LoginForm = props => {
    const onSubmit = (formProps) => {
        return new Promise((values, reject) => {
            props.dispatch(login(formProps.username, formProps.password));
            Promise.resolve();
        });
    }

    const { handleSubmit } = props;

    return (
    <form className="form" onSubmit={handleSubmit(onSubmit.bind(this))}>
      <div className="flex_horizontal_row container_connexion">
        <div className="width_40 flex_horizontal_column">
          <Field
            name="username"
            component={renderField}
            type="text"
            placeholder="E-mail*"
          />
          <Field
            name="password"
            component={renderField}
            type="text"
            placeholder="Mot de passe*"
          />
          <button type="submit" className='input_submit input_submit_big'>
              Se Connecter
          </button>
        </div>
      </div>
    </form>
    );
}

相关操作如下所示:

export function login( username, password ){
  return (dispatch) => {
    var auth = services.auth.api.login( { 'data': { 'data': { 'username': username, 'password': password } } } ).then( function( response ) {
        dispatch( loginSuccess( response ) );
    }).catch( ( e ) => {
        console.log( e );
        dispatch( loginError( e ) );
        return Promise.reject( new SubmissionError({_error: e}));
    });
  };
}

我正在使用来自redux-form / immutable的SubmissionError,Field和reduxForm。我所理解的是,我对登录操作的调用实际上是返回一个promise,但是实例化SubmissionError对象也会返回一个,所以它失败了,因为我确实嵌套了Promise,后者处理不当?

准确的问题是:

上的Unhandled promise rejection
errors: Object { _error: Error }
message: "Submit Validation Failed"
name: "SubmissionError"
stack: "ExtendableError@http://localhost/app.js:23204:14\nSubmissionError@http://localhost/app.js:28229:51\nlogin/</auth<@http://localhost/app.js:65859:45\nrun@http://localhost/app.js:66871:22\nnotify/<@http://localhost/app.js:66884:30\nflush@http://localhost/app.js:67212:9\n"

我不知道返回和处理submissionError的正确方法,以显示我的组件中的信息,并阅读了大量的页面,包括redux-form的github问题,不同的SO线程和官方文档。

如果您有任何想法,请告诉我!

0 个答案:

没有答案