React分页

这是一个React组件示例,展示了如何利用Axios从API获取数据并结合Ant Design的Pagination组件实现分页加载。组件在接收到当前页面数后更新状态,并通过生命周期方法 componentDidMount 和 Pagination 的 onChange 事件来触发数据的获取。数据加载过程中显示加载状态,加载完成后展示列表。
摘要由CSDN通过智能技术生成
import React, { Component } from 'react';
import Axios from 'axios';
import { Pagination } from 'antd';
class View extends Component {
    constructor(props) {
        super(props)
        this.state = {
            loading: true,
            lists: [],
            defaultCurrent: sessionStorage.getItem('currentPages') || 1,
            setPageCfg: {
                currentPage: 1,
                totalPage: 10
            },
        }
        this.getpdd = this.getpdd.bind(this)
    }
    getpdd(page, pagesize = 10) {
        const _this = this
        //设置第几页
        //重新读取sessStorage
        sessionStorage.setItem('currentPages', encodeURIComponent(page));
        Axios.get('/home/mediareports', {
            params: {
                'page_number': page,
                'page_size': pagesize
            }
        })
            .then((res) => {
                if (res.data.code === 200) {
                    _this.setState({
                        lists: res.data.data
                    })
                    this.setState({
                        setPageCfg: {
                            currentPage: parseInt(page), //要转成number
                            totalPage: res.data.total
                        }
                    })
                }
                this.setState({
                    loading: false
                })
            })
            .catch((error) => {
                console.log(error)
            })
    }
    list() {
        const lists = this.state.lists.map((val, index) =>
            <li key={index}>
                {val.id}---{val.main_title}---{val.sourceDate}
            </li>)
        return lists;
    }
    componentDidMount() {
        let { defaultCurrent } = this.state;
        setTimeout(() => {
            this.getpdd(defaultCurrent)

        }, 1000)
    }
    render() {
        const { lists, loading, setPageCfg } = this.state
        return (
            <div className="page">
                {loading ? <div className="loading_box"><div className="loading"></div></div>
                    : (
                        lists.length !== 0
                            ? <ul>{this.list()}</ul>
                            : <div className="no_result">小主~你还没有收益呦~</div>
                    )
                }
                {
                    lists.length !== 0 ? <Pagination onChange={this.getpdd} current={setPageCfg.currentPage} defaultCurrent={setPageCfg.currentPage} total={setPageCfg.totalPage} /> : ''
                }
            </div>
        );
    }
}

export default View;

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值