react请求本地假数据，并且将请求的数据在render中显示

最新推荐文章于 2022-12-10 14:22:44 发布

原创最新推荐文章于 2022-12-10 14:22:44 发布 · 1.8k 阅读

3 ·

CC 4.0 BY-SA版权

react 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何在React应用中利用Axios模块进行异步数据请求，并详细解释了componentWillMount生命周期方法下的数据加载流程。文章还探讨了如何在render函数中巧妙地控制异步数据的更新与显示，确保数据加载完毕后再更新UI。

准备工作
通过create-react-app 创建的根目录下有一个public目录，请求时会到该目录下寻找数据，因此把假数据放到该目录下
下载并且引入axios模块
实现过程
在componentWillMount下请求数据，

componentWillMount () {
        axios.get ('http://localhost:5000/test/menu.json')
            .then (
                res => {
                    this.setState ({
                        data: res.data,
                        isLoading : true
                    },() => {
                        const { data } = this.state
                        console.log(data)
                    })
                }
            )
    }

上面代码块中的isLoading是用来控制this.setState({})异步更新完数据后再执行一次render()函数的开关。

if(!isLoading) {
                return null
            }
 return （
	数据更新完成后执行的代码块
）

再本题中，请求数据相对简单，将异步请求的数据放到render函数中进行更新显示是需要巧妙控制的。
react中函数加载顺序是
componentWillMount（）=》render（）=》componentDidMount（）
在这里componentWillMount替换为componentDidMount同样可以实现