本文介绍如何在React应用中使用axios请求数据并将其渲染到组件。首先，通过create-react-app搭建项目环境，然后安装bootstrap和axios。接着在List.js组件中创建TrData子组件，用于展示数据。在组件的componentDidMount生命周期方法中，使用axios请求MockAPI的数据，并将数据保存在state中。最后，在App.js中引入并渲染List组件，运行项目展示数据。
开始这个实例之前需要对es6、react、axios有一定的了解
安装一个react项目的脚手架 create react-app
在开始之前，你可能需要安装 yarn。
$ yarn create react-app antd-demo工具会自动初始化一个脚手架并安装 React 项目的各种必要依赖，如果在过程中出现网络问题，请尝试配置代理或使用其他 npm registry。
然后我们进入项目并启动。
$ cd antd-demo
$ yarn start此时浏览器会访问 http://localhost:3000/ ，看到 Welcome to React 的界面就算成功了。
想了解create react-app脚手架结合antd使用的可以访问这个地址：
https://ant.design/docs/react/use-with-create-react-app-cn
在前端开发的时候，需要获取后台的数据，并把数据渲染到组件展示给用户看，那么这个过程如何实现呢
一般的思路是请求后端提供的接口数据，再把数据渲染出来。
下面一个实例展示：
上图我打算分为两个部分来写，第一个部分就是红色的表格头，固定的内容，一个是绿色的数据表格行，把他抽成一个组件的形式来渲染数据，而这些数据呢，我打算用https://www.mockapi.io来模拟真实数据了，也就是说模拟后端提供的接口数据，如果没用过mockapi的话也可以上网查一下。
大家也可以用这个数据接口：https://5b5e71c98e9f160014b88cc9.mockapi.io/api/v1/lists
接口的数据大概这
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
