react+ts实现分页全部功能

index.tsx代码

import React, { Component } from 'react';
import Header from '../../component/header'
import Footer from '../../component/footer'
import { Pagination } from 'antd';
import axios from 'axios';
type Props = {
    history:any
    data:any
}
class Index extends React.Component<Props>{
    constructor(props:any){
        super(props)
        this.state={
            list:[],
            pPageCfg: {
                page_number: sessionStorage.getItem("currentPages") || 1,
                page_size: 8,
              },
            setPageCfg: {
                currentPage: 1,
                totalPage: 24,
            },
         }
         this.lists=this.lists.bind(this)
    }
   
   itemRender(current:any, type:any, originalElement:any) { if (type === 'prev') { return <a>上一页</ a>; } if (type === 'next') { return <a>下一页</ a>; } return originalElement; }
   getPage=(page:any, page_size = 8)=> {
    sessionStorage.setItem("currentPages", encodeURIComponent(page));
    const { pPageCfg }:any = this.state;
    pPageCfg.page_number = page;
    pPageCfg.page_size = page_size;
    console.log({...pPageCfg},123)
    axios.get("http://localhost:8888/pages", {params:{...pPageCfg}}).then((res) => {
      console.log(res.data);
      const list2=res.data.data
        this.setState({
           list:list2,
          setPageCfg: {
            currentPage: page,
            totalPage: 24,
          },
        });
    });
  }
  lists():any{
    const {list}:any =this.state
    return list.map((item:any,index:any)=>{
     return <li key={index} onClick={()=>{this.xiabiao(item,index)}}>
             <div>
                  <img src={item.img} alt="" />
                  <p>{item.txt}</p>
             </div>
         </li>
    })
}
   componentDidMount(){
    const { setPageCfg }:any = this.state;
      this.getPage(setPageCfg.currentPage);
   }
   xiabiao(item:any,index:number){
    console.log(item)
    this.props.history.push({pathname: `/case/detail/${index}`, state: {data:item}})
   }
   first(){
    let {setPageCfg}:any =this.state
    if(setPageCfg.currentPage == 1){
      return
    }
    setPageCfg.currentPage = 1
    this.setState({
      setPageCfg
    })
    this.getPage(1)
   }
   end(){
    let {setPageCfg}:any =this.state
    if(setPageCfg.currentPage == 3){
      return
    }
    setPageCfg.currentPage = 3
    this.setState({
      setPageCfg
    })
    this.getPage(3)
  }
    public render() {
        const {list,setPageCfg}:any=this.state
        console.log(list)
        return (
            <div>
              <Header></Header>
                <ul className="content">{list.length>0&&this.lists()}</ul>
                <div className="fenyeqi">
                  <p className="zongshu">共有3页</p>
                  <p onClick={()=>{this.first()}}>首页</p>
                  {list.length !== 0 ? (
                  <Pagination 
                    className="fenye"
                    onChange={this.getPage}
                    current={setPageCfg.currentPage}
                    defaultPageSize={8}
                    total={setPageCfg.totalPage}
                    itemRender={this.itemRender}
                   />
                  ) : (
                  "请等待..."
                  )}
                  <p onClick={()=>{this.end()}}>尾页</p>
                </div>
                <Footer></Footer>
            </div>
        );
    }
}

export default Index;

后台接口

router.get('/pages', async (req, res, next) => {
  let {page_size=8,page_number=1}=req.query
  let sql = `select * from pages limit ${(page_number-1)*page_size},${page_size}`
  let result = await mysql(sql)
  if (result) {
    res.json(new SuccessModule(result))
    return
  }

  res.json(new ErrorModule('操作失败'))
})