一个请求后端数据的React组件该有的格式

154 阅读 0 评论 102 点赞

我是靠谱客的博主靓丽航空，这篇文章主要介绍一个请求后端数据的React组件该有的格式，现在分享给大家，希望可以做个参考。

当一个React组件需要请求后端数据，根据数据是否请求到或数据是否正确要进行不同的页面渲染

组件所需要的包，axios为请求库，antd为UI框架，都可更换：

复制代码

1
import React, { Component } from 'react';import axios from 'axios';import { Spin, Empty } from 'antd';复制代码

组件在初始化时需要的状态：

复制代码

1
2
3
4
5
6
7
8
constructor (props) {
super(props);
this.state = {
isLoading: true,
isNetWorkError: false,
isReturnDataError: false,
data: null,
}}复制代码

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
render () {
const { isLoading, isNetWorkError, isReturnDataError, data } = this.state;
if (isLoading) {
return <div className="wrapper"><Spin size="large" tip="正在加载中..." /></div>
} else if (isNetWorkError) {
return <div className="wrapper">没有请求到数据哦，请检查网络</div>
} else if(isReturnDataError) {
return <div className="wrapper"><Empty /></div>
} else {
return (
<div className="wrapper">
{data.name}
</div>
)
}}复制代码

组件在第一遍渲染时，isLoading为true，所以页面显示加载中元素：

当组件挂载到DOM结构上后，执行componentDidMount()生命周期函数，开始获取后端数据

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
componentDidMount () {
axios.get('你的数据接口地址')
.then(res => {
if (res.data && res.data.success) {
this.setState({
isLoading: false,
isNetWorkError: false,
isReturnDataError: false,
data: res.data.data
})
} else {
this.setState({
isLoading: false,
isNetWorkError: false,
isReturnDataError: true,
})
}
})
.catch(() => {
this.setState({
isLoading: false,
isNetWorkError: true,
})
})}复制代码