本文例項為大家分享了React實現分頁效果的具體程式碼，供大家參考，具體內容如下

首先確保已經安裝了antd,axios

jsx檔案:

import React,{ useState,useEffect } from 'react'
import { Pagination } from 'antd';
import './loading.scss'
import Unit from '../hml'
const App = () => {
    // 設定第幾頁
    const [num,setNum] = useState(1)
    // 獲取的資料載體
    const [data,setData] = useState([])
    //剛才用掛載方法,二次獲取不好用
    useEffect(() => {
        Unit.getApi2('/home/mediareports',{
            // 資料頁
            page_number: num,// 每頁多少資料
            page_size: 10
        },{}).then((res) => {
            //獲取資料
            setData(res.data.data)
        })
    },[num])
    const add = (e) => {
        //每次點擊向前翻一頁
        setNum(e)
    }
    return (
        <>
            <ul>
                {/* map生成資料 */}
                {
                    data.map((item,index)=>{
            VSsoUz
 
            return <a href={item.jump_url} key={index}><br />
                            {
                                item.main_title
                            }
                        </a>
                            
                    })
                }
            </ul>
            {/* 這裡的問題雖然解決了,但是不知道為什麼上傳 e 能獲取當前點選的下標而不是元素,不過我感覺應該和total有關 */}
            <Pagination defaultCurrent={num} total={500} onChange={(e)=>add(e)}/>
        &lwww.cppcns.com
 
t;/>
    )
}
export default App

loading.scss檔案:

// antd沒有樣式,下面程式碼可以解決這個問題
@import '~antd/dist/antd.css';

hml.js:(這程式設計客棧就是我發的那個axios封裝)

import axios from 'axios';
const Unit = {
    async getApi(ajaxCfg){
        let data = await axios.get(ajaxCfg.url,{params:ajaxCfg.cfg},{
            headers: ajaxCfg.headers
        })
        return data;
    },async getApi2(url,cfg,headers){
        let data = await axios.get(url,{params:cfg},{
            headers: headers
        })
        return data;
    },async postApi(url,headers){
        let fd = new FormData();
        for(let key in cfg){
            fd.append(key,cfg[key]);
        }
        let data = await axios.post(url,fd,async putApi(url,headers){
        // import qs from 'qs';
        // let data = await axios.put(url,qs.stringify(cfg),{
        //     headers: {
        //         'Content-Type':'application/x-www-form-urlencoded',//     }
        // })
        // return data;
    },async requestApi(cfg,headers,file){
       let fd = new FormData();
       fd.append('param',JSON.stringify(cfg));
       if(file){
           // 上傳證明
           if(file.length){
               for(let i=0,len=file.length;i<len;i++){
                   fd.append('files',file[i]);
               }
          VSsoUz
 
 }else {
               // 單個上傳
               for(let key in file){
                   fd.append(key,file[key]);
               }
           }
       }
       let data = await axios.post('/batch',{
           headers: headers
       })
       return data;
   }
}
export default Unit;

setupProxy.js:

const { createProxyMiddl程式設計客棧eware } = require('http-proxy-middleware');
module.exports = function (app) {
  app.use(
    // 設定路徑
    '/home',createProxyMiddleware({
      target: 'https://home-api.pinduoduo.com',changeOrigin: true,})
  );
};

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。