この記事では、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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL 5.6 圧縮パッケージのインストール方法
>>: VMware Workstation Pro が Windows で実行されない場合の解決策
プロジェクトの開発中に、データベースのデータがどんどん大きくなり、その結果、1 つのテーブルにデータ...
CSS スタイル html,本文{ 幅: 100%; 高さ: 100%; マージン: 0;パディング...
fdisk と比較すると、parted はあまり使用されず、主に 2T を超えるパーティションに使用...
この記事の例では、製品の拡大鏡効果を実現するためのVueの具体的なコードを共有しています。具体的な内...
序文MySQLでは、準備、実行、割り当て解除を正式にはPREPARE STATEMENTと呼びます。...
ウェブページに表示されるプレーヤーは、WMP/RealPlayer/Flash Player に過ぎ...
HTMLページジャンプ: window.open(url, "", "...
目次1. psutilパッケージをインストールする次に、オペレーティングシステム内のすべてのサービス...
IE6 と IE7 では CSS の解釈に多くの違いがあります。今日はそのうちの 1 つである高さに...
昨日、円形のプログレスバー (Vue 円形プログレスバーを参照してください) についてブログを書きま...
Linux の ps コマンドは Process Status の略です。 ps コマンドは、システ...
導入:多くの場合、さまざまな選択ステートメントを使用して必要なデータを照会した後、多くの人は作業が正...
目次成果を達成するsortablejs の紹介具体的な実装成果を達成する最初は、antdesign ...
<br />私が住んでいる地域では、コミュニティに出入りする車両を管理するために、コミュ...
パノラマビュー効果を見てみましょう: 住所を表示スクリーンショット: 体験してみると、周囲の環境がぐ...