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

绝地灬酷狼 2022-01-20 12:27 103阅读 0赞

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

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

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

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

constructor (props) { super(props); this.state = { isLoading: true, isNetWorkError: false, isReturnDataError: false, data: null, }}复制代码

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()生命周期函数，开始获取后端数据

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,        })    })}复制代码

当用户电脑无网络则发送请求失败，isNetWorkError为true，页面则渲染新的元素，也有可能是接口不通，这时候可以提示新的状态：

当请求成功发送，但返回的数据格式不对，可能是用户的登陆状态让其无法获取到该数据，则页面渲染新的元素：

当数据返回的是成功的格式，则渲染数据到页面上：

好啦，这就是一个组件该如何从发送请求到获得数据并渲染的一个简单全部过程，重点是根据不同的时期来设置不同的组件状态state，然后条件渲染即可。