React如何使用axios请求数据并把数据渲染到组件


Posted in Javascript onAugust 05, 2022

开始这个实例之前需要对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

接口的数据大概这样子,json的数据格式

[
  {
    "id": "1",
    "name": "小红",
    "age": 20,
    "sex": "女"
  },
  {
    "id": "2",
    "name": "小明",
    "age": 21,
    "sex": "男"
  },
  {
    "id": "3",
    "name": "翠花",
    "age": 24,
    "sex": "女"
  },
  {
    "id": "4",
    "name": "秋香",
    "age": 25,
    "sex": "女"
  },
  {
    "id": "5",
    "name": "张三",
    "age": 30,
    "sex": "男"
  }
]

开始写代码:

为了方便不用写css,直接安装个boostrap,然后引入boostrap的样式好了

一、安装boostrap、axios

npm install bootstrap@3.3.7 --save

请求数据就用axios吧,也可以用JQuery的ajax(),我这里用axios

npm isntall axios --save

如果安装完成,可以看到

React如何使用axios请求数据并把数据渲染到组件

二、在src目录下新建一个List.js,在List.js中

在create-react-app可以尽情使用es6、es7的语法了,我们会对项目打包。

import React from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import axios from 'axios';

首先先把组件写好,在List.js中,我先第一个表格数据的组件TrData

//List.js
class TrData extends React.Component{
  constructor(props){
    super(props);
  }
  render(){
    return (
      this.props.users.map((user,i)=>{
          return (
              <tr key={user.id} className="text-center">
                <td>{user.id}</td>
                <td>{user.title}</td>
                <td>{user.name}</td>
                <td>{user.sex}</td>
              </tr>
          )       
      })
    )
  }
}

首先用React.Component创建一个TrData组件,然后渲染传进来的数据users,循环遍历出来.遍历users的方法是es6的map()方法,大家也可用其他方法遍历了,只要数据能出来。

通过props给这个组件导入数据。接下来,我再创建一个List的组件,来显示UI视图

//List.js
class List extends React.Component {
    constructor(props){
        super(props);
  }
  render() {
      return (
        <table className="table table-bordered">
          <thead>
            <tr>
              <th className="text-center">ID</th>
              <th className="text-center">姓名</th>
              <th className="text-center">年龄</th>
              <th className="text-center">性别</th>
            </tr>
          </thead>
        <tbody>
           <TrData users={this.state.users}/>
        </tbody>
        </table>
      )  
  }
}

并且导出这个组件

//List.js
export default List;

接下来,我们来请求数据,我们知道在vue中有生命周期,可以选择在特定的生命周期上进行数据挂载。同样React也有生命周期。

当组件输出到 DOM 后会执行 componentDidMount()钩子,也就是说我们可以在componentDidMount()内请求数据,并更新数据。

还有一点就是我们请求的数据要放在那儿,没错,这就是state。可能有些读者不懂这个state,这里简单讲一下,state就是可以存储组件的一系列状态。只能定义在组件内部。接下来,我两个state的两个状态,一个是users,一个是是否已经加载数据完成的isLoaded。

在组件List内部加入

constructor(props){
    super(props);
    this.state={
      users:[],
      isLoaded:false
    }
  }

state需要在constructor上定义。这涉及ES6的语法特性,这里就不过多讲其他的了。

我们再在List内部添加

//当组件输出到 DOM 后会执行 componentDidMount()
componentDidMount(){
    const _this=this;    //先存一下this,以防使用箭头函数this会指向我们不希望它所指向的对象。
    axios.get('https://5b5e71c98e9f160014b88cc9.mockapi.io/api/v1/lists')
    .then(function (response) {
      _this.setState({
        users:response.data,
        isLoaded:true
      });
    })
    .catch(function (error) {
      console.log(error);
      _this.setState({
        isLoaded:false,
        error:error
      })
    })
  }

通过axios请求数据,(在我之前的文章有)当请求成功后就更新state的users和isLoaded状态。更新state需要用this.setState()来更新状态,这个很类似微信小程序的setData(),state一发生改变,绑定那些状态的试图也会相应刷新改变。

我再写得合理一些,修改一下List 得render()

//List.js
render() {
      if(!this.state.isLoaded){
        return <div>Loading</div>
      }else{
      return (
        <table className="table table-bordered">
          <thead>
            <tr>
              <th className="text-center">ID</th>
              <th className="text-center">姓名</th>
              <th className="text-center">年龄</th>
              <th className="text-center">性别</th>
            </tr>
          </thead>
        <tbody>
           <TrData users={this.state.users}/>
        </tbody>
        </table>
      )  
    }
  }

当再请求数据得时候显示Loading,请求完成直接显示数据。

三、在app.js中引入List.js并渲染

//app.js
import React, { Component } from 'react';
import './App.css';
import List from './List';
 
class App extends Component {
  constructor(props){
    super(props);
  }
  render() {
    return (
      <div className="container">
        <List />
      </div>
    );
  }
}
 
export default App;

四、在create-react-app脚手架跑起来项目

npm start

访问http://localhost:3000/即可看到如下界面:

React如何使用axios请求数据并把数据渲染到组件

以上为个人经验,希望能给大家一个参考,也希望大家多多支持三水点靠木。 

Javascript 相关文章推荐
表单元素事件 (Form Element Events)
Jul 17 Javascript
原生js事件的添加和删除的封装
Jul 01 Javascript
jquery简单图片切换显示效果实现方法
Jan 14 Javascript
基于jquery实现的仿优酷图片轮播特效代码
Jan 13 Javascript
jQuery简单操作cookie的插件实例
Jan 13 Javascript
完美JQuery图片切换效果的简单实现
Jul 21 Javascript
Node.js的基本知识简单汇总
Sep 19 Javascript
详解tween.js 中文使用指南
Jan 05 Javascript
JavaScript Canvas实现验证码
Aug 02 Javascript
使用layui的router来进行传参的实现方法
Sep 06 Javascript
Vue中qs插件的使用详解
Feb 07 Javascript
js动态添加带圆圈序号列表的实例代码
Feb 18 Javascript
使用JS前端技术实现静态图片局部流动效果
Aug 05 #Javascript
JavaScript圣杯布局与双飞翼布局实现案例详解
Aug 05 #Javascript
react中useState使用:如何实现在当前表格直接更改数据
Aug 05 #Javascript
pnpm对npm及yarn降维打击详解
Aug 05 #Javascript
JS前端可视化canvas动画原理及其推导实现
Aug 05 #Javascript
JS前端使用canvas实现扩展物体类和事件派发
Aug 05 #Javascript
JS前端canvas交互实现拖拽旋转及缩放示例
Aug 05 #Javascript
You might like
不支持fsockopen但支持culr环境下下ucenter与modoer通讯问题
2011/08/12 PHP
PHP调用Linux的命令行执行文件压缩命令
2013/01/27 PHP
ThinkPHP快速入门实例教程之数据分页
2014/07/01 PHP
PHP实现图片旋转效果实例代码
2014/10/01 PHP
一波PHP中cURL库的常见用法代码示例
2016/05/06 PHP
PHP实现生成带背景的图形验证码功能
2016/10/03 PHP
php 截取GBK文档某个位置开始的n个字符方法
2017/03/08 PHP
JQuery优缺点分析说明
2010/06/09 Javascript
javascript获取隐藏dom的宽高 具体实现
2013/07/14 Javascript
jquery基础教程之数组使用详解
2014/03/10 Javascript
js设置cookie过期当前时间减去一秒相当于立即过期
2014/09/04 Javascript
JS实现倒计时和文字滚动的效果实例
2014/10/29 Javascript
解决JS无法调用Controller问题的方法
2015/12/31 Javascript
使用Node.js搭建静态资源服务详细教程
2017/08/02 Javascript
JS实现简单获取最近7天和最近3天日期的方法
2018/04/18 Javascript
详解为生产环境编译Angular2应用的方法
2018/12/10 Javascript
小程序hover-class点击态效果实现
2019/02/26 Javascript
js验证身份证号码记录的方法
2019/04/26 Javascript
vue3.0中的双向数据绑定方法及优缺点
2019/08/01 Javascript
微信小程序弹窗禁止页面滚动的实现代码
2020/12/30 Javascript
深入浅析python继承问题
2016/05/29 Python
简单的python后台管理程序
2017/04/13 Python
理论讲解python多进程并发编程
2018/02/09 Python
Python文件打开方式实例详解【a、a+、r+、w+区别】
2019/03/30 Python
python3.x+pyqt5实现主窗口状态栏里(嵌入)显示进度条功能
2019/07/04 Python
python修改字典键(key)的方法
2019/08/05 Python
django 数据库连接模块解析及简单长连接改造方法
2019/08/29 Python
python解析多层json操作示例
2019/12/30 Python
Python利用for循环打印星号三角形的案例
2020/04/12 Python
微信小程序canvas实现水平、垂直居中效果
2020/02/05 HTML / CSS
德国BA保镖药房韩文网:kr.ba.de
2017/09/04 全球购物
求职推荐信范文
2013/12/01 职场文书
2015年大学生社会实践评语
2015/03/26 职场文书
导游词之凤凰古城
2019/10/22 职场文书
Pandas加速代码之避免使用for循环
2021/05/30 Python
浅谈Python实现opencv之图片色素的数值运算和逻辑运算
2021/06/23 Python