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;
React分页
最新推荐文章于 2024-01-10 11:02:47 发布
这是一个React组件示例,展示了如何利用Axios从API获取数据并结合Ant Design的Pagination组件实现分页加载。组件在接收到当前页面数后更新状态,并通过生命周期方法 componentDidMount 和 Pagination 的 onChange 事件来触发数据的获取。数据加载过程中显示加载状态,加载完成后展示列表。
摘要由CSDN通过智能技术生成