本文實例為大家分享了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 (

<>

{/* map生成數據 */}

{

data.map((item,index)=>{

return

{

item.main_title

}

})

}

{/* 這里的問題雖然解決了,但是不知道為什么上傳 e 能獲取當前點擊的下標而不是元素,不過我感覺應該和total有關 */}

add(e)}/>

>

)

}

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,cfg,headers){

let fd = new FormData();

for(let key in cfg){

fd.append(key, cfg[key]);

}

let data = await axios.post(url,fd,

{

headers: headers

})

return data;

},

async putApi(url,cfg,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

fd.append('files', file[i]);

}

}else {

// 單個上傳

for(let key in file){

fd.append(key, file[key]);

}

}

}

let data = await axios.post('/batch',fd,

{

headers: headers

})

return data;

}

}

export default Unit;

setupProxy.js:

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function (app) {

app.use(

// 設置路徑

'/home', createProxyMiddleware({

target: 'https://home-api.pinduoduo.com',

changeOrigin: true,

})

);

};

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

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的react ajax 分页,React实现分页效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。