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

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

この記事では、Reactでページング効果を実現するための具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

まず、antdとaxiosがインストールされていることを確認してください

jsx ファイル:

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)}/>
        </>
    )
}
デフォルトアプリをエクスポート

.scss ファイルを読み込み中:

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

hml.js: (これは私が送信した axios パッケージです)

'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,
       {
           ヘッダー: ヘッダー
       })
       データを返します。
   }
}
デフォルトの単位をエクスポートします。

セットアッププロキシ.js:

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

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • 自分でReactを使ってページングコンポーネントを書いてみる(まとめ)
  • Reactjsはユニバーサルページングコンポーネントのサンプルコードを実装します
  • ページにデータを表示するReactメソッド

<<:  MySQL 5.6 圧縮パッケージのインストール方法

>>:  VMware Workstation Pro が Windows で実行されない場合の解決策

推薦する

HTML ページの部分更新の実装コード

イベント応答の更新: 要求されたときのみ更新1. JS HTML DOM または jQuery を介...

Vue3+スクリプト設定+ts+Vite+Volarプロジェクト

目次Viteを使用してvue + tsプロジェクトを作成するVue 3の3つの構文オプションAPIコ...

MySQL 中断された接続警告ログの分析

序文:場合によっては、MySQL に接続されたセッションが異常終了することが多く、エラー ログに「通...

ServerManager の起動時にデータベースに接続できないエラーを解決する方法

Servermanager 起動時の接続データベース エラーmgrstart.batを実行しますエラ...

MySQL のデータ型とスキーマの最適化の詳細な説明

現在、MySQL の最適化について学習しています。この記事では、データ型とスキーマの最適化について紹...

CSS XTHML の記述標準とよくある問題の概要 (ページ最適化)

プロジェクトドキュメントディレクトリDiv+CSS 命名規則 - 4 - Div+css 命名規則 ...

VMware Workstation 15 Pro に Ubuntu 1804 をインストールするチュートリアル (画像とテキスト付き)

このメモはインストール チュートリアルです。実用的な意味はありません。記録のためだけに書いています。...

Mybatis ファジークエリ実装方法

Mybatis ファジークエリ実装方法mybatis のリバース アシスタントは非常に使いやすく、通...

Linux は、ディレクトリが存在するかどうかを判断するために if を使用します。

Linux で if を使用してディレクトリが存在するかどうかを判断する方法方法は次のとおりです。...

Linux で mysql-8.0.20 をインストールするための詳細なチュートリアル

** Linuxにmysql-8.0.20をインストールする**環境の紹介オペレーティングシステム:...

VMware WorkStation 14 pro インストール Ubuntu 17.04 チュートリアル

この記事では、VMware Workstation14 ProにUBuntu17.04をインストール...

CSS3 で背景ぼかしを実現する 3 つの方法 (要約)

1. 通常の背景ぼかしコード: <スタイル> html, 体 { 幅: 100%; 高...

MySQL におけるデータベース間関連クエリメソッド

ビジネスシナリオ: 異なるデータベース内のテーブルをクエリするたとえば、関連付けられるテーブルは、マ...

さまざまなHTTPリターンステータスコードの詳細な説明

サイト上のページを表示するためのリクエストがサーバーに送信されると(たとえば、ユーザーがブラウザでペ...

MySQL ストアド プロシージャで月ごとにテーブルを作成する方法

詳細には立ち入らずに、コードに直接進みましょう。一緒にコミュニケーションを取り、学びましょう。月ごと...