React如何使用axios請求資料並把資料渲染到元件

2022-08-04 22:02:48

我打算分為兩個部分來寫，第一個部分就是紅色的表格頭，固定的內容，一個是綠色的資料表格行，把他抽成一個元件的形式來渲染資料，而這些資料呢，我打算用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

如果安裝完成，可以看到

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

以上為個人經驗，希望能給大家一個參考，也希望大家多多支援it145.com。

React如何使用axios請求資料並把資料渲染到元件

目錄

一、安裝boostrap、axios

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

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

四、在create-react-app腳手架跑起來專案

熱門文章