Javascript 使用react和axios以redux形式进行基于服务器的错误处理

我不确定我的确切问题是什么，因为我对react redux和涉及的各种插件相当陌生

我的安装程序正在使用以下软件包：

"axios": "^0.17.0",
"react": "^16.1.1",
"react-dom": "^16.1.1",
"react-redux": "^5.0.6",
"react-router-dom": "^4.2.2",
"react-scripts": "1.0.17",
"redux": "^3.7.2",
"redux-form": "^7.1.2",
"redux-promise": "^0.5.3"

我有一个组件，它使用表单将数据发布到服务器端点

根据结果，我想显示表单级验证，例如：

用户名不存在

我想显示表单级错误。或者，如果我得到一个

404

响应，我也希望能够处理这个问题

我目前使用文件底部的标准方法将我的组件链接到

redux表单

库。我的验证功能在表单提交之前按预期运行

我的表单有一个

onSubmit

属性，该属性解析为返回的承诺。此承诺来自发出服务器请求的操作创建者

我已经通读了这本书，似乎我正在寻找答案

当我在我的

onSubmit

函数中抛出此错误时，我得到了预期的行为，但是我的action creator没有运行

    onSubmit(values) {
        throw new SubmissionError({_error: 'test' })            
        return this.props.loginUser(values));
    }

如果我从返回的承诺中链接一个

.then（）

，并抛出

SubmissionError

，我会得到另一个错误

    onSubmit(values) {
        return this.props.loginUser(values).then(() => { throw new SubmissionError({_error: 'test' })});
    }

我准备了很多答案，但没有一个适合我的情况。有些是类似的，我已经能够做到这一点，因为这一点，但我仍然无法触发表单级错误，这取决于服务器响应的预期

登录信息：

import React，{Component}来自'React'；
从'redux form'导入{Field，reduxForm，SubmissionError}；
从'react router dom'导入{Link}；
从'react redux'导入{connect}；
从“../../../actions”导入{loginUser}；
从“../Fields/InputField.js”导入InputField；
从“../../../routes”导入{VIEWS}；
类登录扩展组件{
建造师（道具）{
超级（道具）；
this.onSubmit=this.onSubmit.bind（this）；
}
onSubmit（值）{
返回this.props.logiuser（值）；
}
render（）{
const{handleSubmit}=this.props；
返回(
明确说明
{this.props.error}
登录
记得我吗
你没有账户吗

立即注册»；
);
}
}
函数验证（值）{
常量错误={}；
//需要在此处验证电子邮件
如果（！values.email）{
errors.email=“输入电子邮件”；
}
如果（！values.password）{
errors.password=“输入密码”；
}
返回错误；
}
常量formData={
验证
表单：“LoginForm”
};
const connected=connect（null，{loginUser}）（登录）；
导出默认reduxForm（formData）（已连接）；

动作创造者

导出函数登录用户（值）{
const request=axios({
方法：“post”，
跨域：是的，
url:API.LOGIN，
数据：值
}).catch（（错误）=>{
log（'helloworld'）；
抛出新的SubmissionError（{u error:'testing'}）；
});
返回{
类型：登录用户，
有效载荷：请求
};
}

我想我错过了一些很小但很重要的东西

如何使用

redux表单

库以预期方式根据服务器响应将错误传递给表单组件？

---

非常感谢您的帮助。

因为

this.props.logiuser（values）

返回一个动作

{type，payload}

。尝试使用

payload

如下：

onSubmit（values）{返回this.props.logiuser（values.payload；}

@NinhPham谢谢您的评论，但这不起作用。我将我的承诺转移到我的组件，而不是行动创建者。它是有效的，但我更希望它是在这个问题上提出的方式。