React如何使用axios請求數據並把數據渲染到組件

Posted on by

開始這個實例之前需要對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 [email protected] --save

請求數據就用axios吧，也可以用JQuery的ajax(),我這裡用axios

npm isntall axios --save

如果安裝完成，可以看到

二、在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/即可看到如下界面：

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。 

推薦閱讀：