我目前陷入了一个问题。我希望实现的是将错误消息从我的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线程和官方文档。
如果您有任何想法,请告诉我!