react中如何异步展示后台接口的提示消息

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

调用接口后，后台会返回这样的一段信息提示：{"errCode":400002,"errMsg":"字段校验异常","data":{"jzq":"日期不能为空","cfmc":"名称不能为空","jdrq":"决定日期不能为空","cflb1":"类别1不能为空"}}

先补充点一些其他的知识：

关于axios(以前用的jquer的ajax请求，现在大都推崇axios来代替)

参考地址：http://www.tuicool.com/articles/yINjEb6

执行 POST 请求axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});

项目框架用到的技术组合：

1.react+ant design+react-router+redux（关于每个框架具体是怎么用和用来做什么的还请自己查阅相关文档）

2. 使用 immutable state

3.使用 Classes

React 与 ES2015 的 Class 语法搭配的很好.

class HelloMessage extends React.Component {

render() {

return

Hello {this.props.name}

} }

4.打包编译工具：babel

下面进入今天的主题：一个业务场景是这样的，我有一个表单，我正在编辑该表单的某些字段，然后当我点击“保存”按钮的时候，执行保存，成功提示“保存成功”，如果失败，需要提示后台返回的错误消息：具体是那个字段出问题了。

现在回到我的代码上来，其实这个功能按照传统的jQuery模式很简单，ajax后分success或者erro就可以做操作了！在react中，在看看应该如何来实现：

handleSubmit = (e) => { e.preventDefault();
this.props.form.validateFieldsAndScroll((errors, values) => {
if (errors) {
console.error(errors);
return;
} const payload = {...this.props.xkObj, ...values};
//调用执行修改函数
this.props.xzxkService.updateXzxk(payload)
.then(data=> {
console.log('data', data);
Utils.pushLink('/reporting/xxxx')
})
.catch(error=> {
//当有错误消息是提示错误消息
const err = {errCode: error.errCode, errMsg: error.errMsg, data: error.data};
console.log('err', err);
let hlresultMessage ="";
hlresultMessage +='错误消息：';
if (err) {
for(let i in err.data){
hlresultMessage +=err.data[i]+',';//组装这个对象，拼接错误消息
}
//alert(hlresultMessage);
Modal.error({//使用模态框的error模式，需要引入对应的组件
title:'错误消息',
content:hlresultMessage
})
}
});
});
};