React implementiert Paging-Effekt

importiere React, { useState, useEffect } von 'react'
importiere { Paginierung } von 'antd';
importiere './loading.scss'
Einheit aus '../hml' importieren
const App = () => {
    // Seitennummer festlegen const [num, setNum] = useState(1)
    // Erhaltener Datenträger const [data, setData] = useState([])
    // Habe gerade die Mount-Methode verwendet, die sekundäre Erfassung ist nicht einfach zu verwenden.useEffect(() => {
        Unit.getApi2('/home/Medienberichte', {
            //Datenseite Seitennummer: num,
            // Wie viele Daten pro Seite page_size: 10
        }, {}).then((res) => {
            //Daten abrufen setData(res.data.data)
        })
    }, [Nummer])
    const add = (e) => {
        // Jeder Klick blättert eine Seite weiter setNum(e)
    }
    zurückkehren (
        <>
            <ul>
                {/* Karte generiert Daten */}
                {
                    Daten.Karte((Element,Index)=>{
                        zurück <a href={item.jump_url} key={index}><br />
                            {
                                Artikel.Haupttitel
                            }
                        </a>
                            
                    })
                }
            </ul>
            {/* Obwohl das Problem hier gelöst ist, weiß ich nicht, warum beim Hochladen e der aktuell angeklickte Index anstelle des Elements abgerufen werden kann, aber ich denke, es sollte mit der Gesamtsumme zusammenhängen*/}
            <Pagination defaultCurrent={num} total={500} onChange={(e)=>add(e)}/>
        </>
    )
}
Standard-App exportieren

// antd hat keinen Stil, der folgende Code kann dieses Problem lösen @import '~antd/dist/antd.css';

importiere Axios von „Axios“;
const Einheit = {
    async getApi(ajaxCfg){
        let data = warte auf axios.get(ajaxCfg.url,{params:ajaxCfg.cfg},
        {
            Header: ajaxCfg.headers
        })
        Daten zurückgeben;
    },
    async getApi2(url,cfg,header){
        let data = warte auf axios.get(url,{params:cfg},
        {
            Überschriften: Überschriften
        })
        Daten zurückgeben;
    },
    asynchron postApi(url,cfg,headers){
        let fd = neue FormData();
        für (let-Schlüssel in cfg) {
            fd.append(Schlüssel, cfg[Schlüssel]);
        }
        let data = warte auf axios.post(url,fd,
        {
            Überschriften: Überschriften
        })
        Daten zurückgeben;
    },
    asynchron putApi(url,cfg,header){
        // importiere qs von „qs“;
        // lass Daten = warte auf axios.put(url,qs.stringify(cfg),{
        // Überschriften: {
        // 'Inhaltstyp':'Anwendung/x-www-form-urlencoded',
        // }
        // })
        // Daten zurückgeben;
    },
    asynchrone AnfrageAPI(cfg,Header,Datei){
       let fd = neue FormData();
       fd.append('param', JSON.stringify(cfg));
       if(Datei){
           // Nachweis hochladen if(file.length){
               für (let i=0,len=Dateilänge;i<len;i++){
                   fd.append('Dateien', Datei[i]);
               }
           }anders {
               // Einzelner Upload für (Schlüssel in Datei lassen){
                   fd.append(Schlüssel, Datei[Schlüssel]);
               }
           }
       }
       let data = warte axios.post('/batch',fd,
       {
           Überschriften: Überschriften
       })
       Daten zurückgeben;
   }
}
Standardeinheit exportieren;

const { createProxyMiddleware } = erfordern('http-proxy-middleware');
modul.exporte = Funktion (App) {
  app.verwenden(
    // Setze den Pfad '/home', createProxyMiddleware({
      Ziel: 'https://home-api.pinduoduo.com',
      changeOrigin: wahr,
    })
  );
};