react 结合antd 实现分页效果

import React, { useState, useEffect } from "react";
// antd 
import { Pagination } from "antd";
// 二次封装axios
import Unit from "../分页/index.js";
 
const App = () => {
  const [sj, setSj] = useState({
    currentPage: 1,
    totalPage: 10,
  });
  //赋值data
  const [data, setdate] = useState([]);
 
  function list() {
    return (
      <ul>
        {data.map((item, index) => {
          return (
            <li key={index}>
              {item.id}----{item.main_title}
            </li>
          );
        })}
      </ul>
    );
  }
  //  axios
  const dy = (page = 1, page_size = 10) => {
    const cfg = {
      page_number: page,
      page_size: page_size,
    };
    Unit.getApi2("/home/mediareports", cfg, {}).then((res) => {
      if (res.data.code === 200) {
        setSj({
          currentPage: page,
          totalPage: res.data.total,
        });
        setdate(res.data.data);
      } else {
      }
    });
  };
  // 挂载调用
  useEffect(() => {
    dy();
  }, []);
 
  return (
    <div>
      {data.length !== 0 ? list() : ""}
      <Pagination
        onChange={dy}
        defaultCurrent={sj.currentPage}
        total={sj.totalPage}
      />
    </div>
  );
};
 
export default App;
————————————————
版权声明：本文为CSDN博主「李雪峰吖」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/lastone1212/article/details/117416760

　　本人CSDN本章网址:https://blog.csdn.net/lastone1212/article/details/117416760