本文实例为大家分享了React实现分页效果的具体代码，供大家参考，具体内容如下
首先确保已经安装了antd,axios
jsx文件:import React,
本文实例为大家分享了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)=>{
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)}/>
</>
)
}
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<len;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,
})
);
};
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持好代码网。
