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
                        })
                    }
                });
        });
    };