React分页

最新推荐文章于 2024-07-02 11:22:43 发布

lxn_zyl

最新推荐文章于 2024-07-02 11:22:43 发布

阅读量376

点赞数 1

文章标签： reactjs

本文链接：https://blog.csdn.net/lxn_zyl/article/details/117437713

版权

该博客介绍了在React项目中实现分页功能的详细步骤，包括jsx文件的编写、loading.scss文件的样式设置、axios的封装以及setupProxy.js的配置。读者将学习如何在已安装antd和axios的环境中，进行有效的数据请求和页面加载状态管理。

摘要由CSDN通过智能技术生成

首先确保已经安装了antd,axios

jsx文件:

import React, { useState, useEffect } from 'react'
import { Pagination } from 'antd';
import './loading.scss'
import Unit from '../hml'
const App = () => {
    // 设置第几页
    const [num, setNum] = useState(1)
    // 获取的数据载体
    const [data, setData] = useState([])
    //刚才用挂载方法,二次获取不好用
    useEffect(() => {
        Unit.getApi2('/home/mediareports', {
            // 数据页
            page_number: num,
            // 每页多少数据
            page_size: 10
        }, {}).then((res) => {
            //获取数据
            setData(res.data.data)
        })
    }, [num])
    const add = (e) => {
        //每次点击向前翻一页
        setNum(e)
    }
    return (
        <>
            <ul>
                {/* map生成数据 */}
                {
                    data.map((item,index)=>{
                        return <a href&#