• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

React实现分页效果

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持极客世界。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
react 项目中引入图片的几种方式发布时间:2022-02-05
下一篇:
js判断文件是否为utf-8编码的方法发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap