React implements paging effect

This article shares the specific code for React to achieve paging effects for your reference. The specific content is as follows

First, make sure antd and axios are installed

jsx file:

import React, { useState, useEffect } from 'react'
import { Pagination } from 'antd';
import './loading.scss'
import Unit from '../hml'
const App = () => {
    // Set the page number const [num, setNum] = useState(1)
    // Obtained data carrier const [data, setData] = useState([])
    //Just used the mount method, secondary acquisition is not easy to useuseEffect(() => {
        Unit.getApi2('/home/mediareports', {
            //Data page page_number: num,
            // How much data per page page_size: 10
        }, {}).then((res) => {
            //Get data setData(res.data.data)
        })
    }, [num])
    const add = (e) => {
        // Each click turns forward one page setNum(e)
    }
    return (
        <>
            <ul>
                {/* map generates data */}
                {
                    data.map((item,index)=>{
                        return <a href={item.jump_url} key={index}><br />
                            {
                                item.main_title
                            }
                        </a>
                            
                    })
                }
            </ul>
            {/* Although the problem here is solved, I don't know why upload e can get the current clicked index instead of the element, but I think it should be related to total*/}
            <Pagination defaultCurrent={num} total={500} onChange={(e)=>add(e)}/>
        </>
    )
}
export default App

loading.scss file:

// antd has no style, the following code can solve this problem @import '~antd/dist/antd.css';

hml.js: (This is the axios package I sent)

import axios from 'axios';
const Unit = {
    async getApi(ajaxCfg){
        let data = await axios.get(ajaxCfg.url,{params:ajaxCfg.cfg},
        {
            headers: ajaxCfg.headers
        })
        return data;
    },
    async getApi2(url,cfg,headers){
        let data = await axios.get(url,{params:cfg},
        {
            headers: headers
        })
        return data;
    },
    async postApi(url,cfg,headers){
        let fd = new FormData();
        for(let key in cfg){
            fd.append(key, cfg[key]);
        }
        let data = await axios.post(url,fd,
        {
            headers: headers
        })
        return data;
    },
    async putApi(url,cfg,headers){
        // import qs from 'qs';
        // let data = await axios.put(url,qs.stringify(cfg),{
        // headers: {
        // 'Content-Type':'application/x-www-form-urlencoded',
        // }
        // })
        // return data;
    },
    async requestApi(cfg,headers,file){
       let fd = new FormData();
       fd.append('param', JSON.stringify(cfg));
       if(file){
           // Upload proof if(file.length){
               for(let i=0,len=file.length;i<len;i++){
                   fd.append('files', file[i]);
               }
           }else {
               // Single upload for(let key in file){
                   fd.append(key, file[key]);
               }
           }
       }
       let data = await axios.post('/batch',fd,
       {
           headers: headers
       })
       return data;
   }
}
export default Unit;

setupProxy.js:

const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function (app) {
  app.use(
    // Set the path '/home', createProxyMiddleware({
      target: 'https://home-api.pinduoduo.com',
      changeOrigin: true,
    })
  );
};

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: