react请求数据，在render中显示

leoxiaoge

于 2021-07-16 16:05:09 发布

阅读量891

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript react 文章标签： react

本文链接：https://blog.youkuaiyun.com/github_37759996/article/details/118804123

JavaScript 同时被 2 个专栏收录

16 篇文章

订阅专栏

react

3 篇文章

订阅专栏

本文介绍了在React应用中如何使用axios进行数据请求。首先，数据被放在public目录下，然后通过create-react-app创建的项目中下载并引入axios模块。在组件的componentDidMount生命周期方法中发起数据请求，利用isLoading状态控制数据更新后的重新渲染。理解React的生命周期方法，如componentWillMount和componentDidMount，对于正确地在render函数中显示请求数据至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

2.实现过程
在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同样可以实现