快捷導(dǎo)航

React如何使用axios請(qǐng)求數(shù)據(jù)并把數(shù)據(jù)渲染到組件

更新時(shí)間：2022年08月04日 17:08:38 作者：一下子就醒了

這篇文章主要介紹了React如何使用axios請(qǐng)求數(shù)據(jù)并把數(shù)據(jù)渲染到組件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

我打算分為兩個(gè)部分來(lái)寫，第一個(gè)部分就是紅色的表格頭，固定的內(nèi)容，一個(gè)是綠色的數(shù)據(jù)表格行，把他抽成一個(gè)組件的形式來(lái)渲染數(shù)據(jù)，而這些數(shù)據(jù)呢，我打算用https://www.mockapi.io來(lái)模擬真實(shí)數(shù)據(jù)了，也就是說(shuō)模擬后端提供的接口數(shù)據(jù)，如果沒(méi)用過(guò)mockapi的話也可以上網(wǎng)查一下。

大家也可以用這個(gè)數(shù)據(jù)接口：https://5b5e71c98e9f160014b88cc9.mockapi.io/api/v1/lists

接口的數(shù)據(jù)大概這樣子，json的數(shù)據(jù)格式

[
  {
    "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": "男"
  }
]

開(kāi)始寫代碼：

為了方便不用寫css,直接安裝個(gè)boostrap，然后引入boostrap的樣式好了

一、安裝boostrap、axios

npm install bootstrap@3.3.7 --save

請(qǐng)求數(shù)據(jù)就用axios吧，也可以用JQuery的ajax(),我這里用axios

npm isntall axios --save

如果安裝完成，可以看到

二、在src目錄下新建一個(gè)List.js,在List.js中

在create-react-app可以盡情使用es6、es7的語(yǔ)法了，我們會(huì)對(duì)項(xiàng)目打包。

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

首先先把組件寫好，在List.js中，我先第一個(gè)表格數(shù)據(jù)的組件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創(chuàng)建一個(gè)TrData組件，然后渲染傳進(jìn)來(lái)的數(shù)據(jù)users，循環(huán)遍歷出來(lái).遍歷users的方法是es6的map()方法，大家也可用其他方法遍歷了，只要數(shù)據(jù)能出來(lái)。

通過(guò)props給這個(gè)組件導(dǎo)入數(shù)據(jù)。接下來(lái)，我再創(chuàng)建一個(gè)List的組件，來(lái)顯示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>
      )  
  }
}

并且導(dǎo)出這個(gè)組件

//List.js
export default List;

接下來(lái)，我們來(lái)請(qǐng)求數(shù)據(jù)，我們知道在vue中有生命周期，可以選擇在特定的生命周期上進(jìn)行數(shù)據(jù)掛載。同樣React也有生命周期。

當(dāng)組件輸出到 DOM 后會(huì)執(zhí)行 componentDidMount()鉤子，也就是說(shuō)我們可以在componentDidMount()內(nèi)請(qǐng)求數(shù)據(jù)，并更新數(shù)據(jù)。

還有一點(diǎn)就是我們請(qǐng)求的數(shù)據(jù)要放在那兒，沒(méi)錯(cuò)，這就是state?？赡苡行┳x者不懂這個(gè)state，這里簡(jiǎn)單講一下，state就是可以存儲(chǔ)組件的一系列狀態(tài)。只能定義在組件內(nèi)部。接下來(lái)，我兩個(gè)state的兩個(gè)狀態(tài)，一個(gè)是users，一個(gè)是是否已經(jīng)加載數(shù)據(jù)完成的isLoaded。

在組件List內(nèi)部加入

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

state需要在constructor上定義。這涉及ES6的語(yǔ)法特性，這里就不過(guò)多講其他的了。

我們?cè)僭贚ist內(nèi)部添加

//當(dāng)組件輸出到 DOM 后會(huì)執(zhí)行 componentDidMount()
componentDidMount(){
    const _this=this;    //先存一下this，以防使用箭頭函數(shù)this會(huì)指向我們不希望它所指向的對(duì)象。
    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
      })
    })
  }

通過(guò)axios請(qǐng)求數(shù)據(jù)，（在我之前的文章有）當(dāng)請(qǐng)求成功后就更新state的users和isLoaded狀態(tài)。更新state需要用this.setState()來(lái)更新?tīng)顟B(tài)，這個(gè)很類似微信小程序的setData()，state一發(fā)生改變，綁定那些狀態(tài)的試圖也會(huì)相應(yīng)刷新改變。

我再寫得合理一些，修改一下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>
      )  
    }
  }

當(dāng)再請(qǐng)求數(shù)據(jù)得時(shí)候顯示Loading,請(qǐng)求完成直接顯示數(shù)據(jù)。

三、在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;