Reactはページング効果を実装する

React をインポートし、{useState、useEffect} を 'react' から取得します。
'antd' から { Pagination } をインポートします。
'./loading.scss' をインポートします
'../hml' からユニットをインポートします
定数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)
        })
    }, [数字])
    定数を追加する = (e) => {
        // クリックするごとに1ページ進む setNum(e)
    }
    戻る （
        <>
            <ul>
                {/* マップはデータを生成します */
                {
                    data.map((item,index)=>{
                        <a href={item.jump_url} key={index}><br /> を返します。
                            {
                                アイテム.メインタイトル
                            }
                        </a>
                            
                    })
                }
            </ul>
            ここでの問題は解決されていますが、アップロード e が要素ではなく現在のクリックされたインデックスを取得できる理由はわかりませんが、合計に関連していると思います* です。
            <ページネーション defaultCurrent={num} total={500} onChange={(e)=>add(e)}/>
        </>
    ）
}
デフォルトアプリをエクスポート

// antd にはスタイルがありません。次のコードでこの問題を解決できます @import '~antd/dist/antd.css';

'axios' から axios をインポートします。
定数ユニット = {
    非同期getApi(ajaxCfg){
        データをaxios.get(ajaxCfg.url,{params:ajaxCfg.cfg}, で待ちます。
        {
            ヘッダー: ajaxCfg.headers
        })
        データを返します。
    },
    非同期 getApi2(url,cfg,headers){
        data = axios.get(url,{params:cfg}, を待ちます。
        {
            ヘッダー: ヘッダー
        })
        データを返します。
    },
    非同期 postApi(url,cfg,headers){
        fd = new FormData();
        for(let key in cfg){
            fd.append(キー、cfg[キー]);
        }
        data = axios.post(url,fd, を待ちます。
        {
            ヘッダー: ヘッダー
        })
        データを返します。
    },
    非同期 putApi(url,cfg,headers){
        // 'qs' から qs をインポートします。
        // data = axios.put(url,qs.stringify(cfg),{ を待機します。
        // ヘッダー: {
        // 'コンテンツタイプ':'application/x-www-form-urlencoded',
        // }
        // })
        // データを返します。
    },
    非同期リクエストAPI(cfg、ヘッダー、ファイル){
       fd = new FormData();
       fd.append('param', JSON.stringify(cfg));
       if(ファイル){
           // アップロード証明 if(file.length){
               for(let i=0,len=file.length;i<len;i++){
                   fd.append('ファイル', ファイル[i]);
               }
           }それ以外 {
               // 単一アップロード for(let key in file){
                   fd.append(キー、ファイル[キー]);
               }
           }
       }
       データをawait axios.post('/batch',fd,
       {
           ヘッダー: ヘッダー
       })
       データを返します。
   }
}
デフォルトの単位をエクスポートします。

const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = 関数 (アプリ) {
  アプリを使用する(
    // パス '/home' を設定し、createProxyMiddleware({
      ターゲット: 'https://home-api.pinduoduo.com',
      変更元: true、
    })
  );
};