この記事では、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. JS HTML DOM または jQuery を介...
目次Viteを使用してvue + tsプロジェクトを作成するVue 3の3つの構文オプションAPIコ...
序文:場合によっては、MySQL に接続されたセッションが異常終了することが多く、エラー ログに「通...
Servermanager 起動時の接続データベース エラーmgrstart.batを実行しますエラ...
現在、MySQL の最適化について学習しています。この記事では、データ型とスキーマの最適化について紹...
プロジェクトドキュメントディレクトリDiv+CSS 命名規則 - 4 - Div+css 命名規則 ...
このメモはインストール チュートリアルです。実用的な意味はありません。記録のためだけに書いています。...
Mybatis ファジークエリ実装方法mybatis のリバース アシスタントは非常に使いやすく、通...
Linux で if を使用してディレクトリが存在するかどうかを判断する方法方法は次のとおりです。...
** Linuxにmysql-8.0.20をインストールする**環境の紹介オペレーティングシステム:...
この記事では、VMware Workstation14 ProにUBuntu17.04をインストール...
1. 通常の背景ぼかしコード: <スタイル> html, 体 { 幅: 100%; 高...
ビジネスシナリオ: 異なるデータベース内のテーブルをクエリするたとえば、関連付けられるテーブルは、マ...
サイト上のページを表示するためのリクエストがサーバーに送信されると(たとえば、ユーザーがブラウザでペ...
詳細には立ち入らずに、コードに直接進みましょう。一緒にコミュニケーションを取り、学びましょう。月ごと...