本文实例为大家分享了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,

})

);

};

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。