在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
本文实例为大家分享了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, }) ); }; 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持极客世界。 |
请发表评论