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;

二次封装axios在本人博客里

​