react请求数据，在render中显示

最新推荐文章于 2024-08-24 07:44:48 发布

原创最新推荐文章于 2024-08-24 07:44:48 发布 · 905 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react

JavaScript 同时被 2 个专栏收录

16 篇文章

订阅专栏

react

3 篇文章

订阅专栏

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

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同样可以实现