react.js中如何實現對表中列表數據的分頁？

Question

需要快速幫助。 我有來自 API 的表中呈現的數據列表。 我需要將此數據列表分頁為小數據列表。

這是VendorsDetail.js的代碼，它在表格中顯示數據列表

import React, { useState, useEffect } from "react";
import HelpOutlineIcon from "@mui/icons-material/HelpOutline";
import axios from "axios";
import VendorDetailsBrief from "./VendorDetailsBrief";
import Pagination from "./Pagination";

const VendersDetail = ({ textMe }) => {
  const [data, setData] = useState({});
  const foo = "cpe:2.3:a:oracle:peoplesoft_enterprise:8.22.14";
  const baseURL =
    "https://services.nvd.nist.gov/rest/json/cves/1.0?cpeMatchString=" + foo;

  useEffect(() => {
    axios
      .get(baseURL)
      .then((response) => {
        setData(response.data);
      })
      .then(
        (response) => {},
        (err) => {
          alert(err);
        }
      );
  }, []);

  const DisplayData = data?.result?.CVE_Items?.map((vender) => {
    return (
      <tr>
        <td className="color_id font-semibold">
          {vender?.cve?.CVE_data_meta?.ID}
        </td>
        <td className="w-96">
          {vender?.cve?.description?.description_data?.[0]?.value}
        </td>
        <td>{vender?.impact?.baseMetricV2?.exploitabilityScore}</td>
        <td>{vender?.impact?.baseMetricV2?.severity}</td>
        <td>{vender?.impact?.baseMetricV2?.impactScore}</td>
      </tr>
    );
  });
  return (
    <div className="z-100 flex justify-center items-center mt-10">
      <div className="text-black">
        <div className="rounded overflow-hidden flex  justify-center items-center">
          <table class="table table-striped ">
            <thead>
              <tr>
                <th>Vuln ID</th>
                <th>Description Data</th>
                <th>Exploitability Score</th>
                <th>Severity</th>
                <th>Impact Score</th>
              </tr>
            </thead>
            <tbody>{DisplayData}</tbody>
          </table>
        </div>
      </div>
    </div>
  );
};

export default VendersDetail;

分頁.js

從“反應”導入反應；

const Pagination = ({ postsPerPage, totalPosts, paginate }) => {
  const pageNumbers = [];

  for (let i = 1; i <= Math.ceil(totalPosts / postsPerPage); i++) {
    pageNumbers.push(i);
  }

  return (
    <nav>
      <ul className="pagination">
        {pageNumbers.map((number) => (
          <li key={number} className="page-item">
            <a onClick={() => paginate(number)} href="!#" className="page-link">
              {number}
            </a>
          </li>
        ))}
      </ul>
    </nav>
  );
};

export default Pagination;

如何在這個特定的數據列表中實現分頁？ 謝謝

Answer 1

1. 使用邏輯創建父組件以從 URL 和分頁 onCLick 處理程序獲取數據。

2. 父組件應該渲染 VendorsDetail 組件和 Pagination 組件。

3. 將要顯示的數據傳遞給 VendorsDetails 組件，並將 getSubsequentData 處理程序傳遞給 Pagination 組件。

4. 如果用戶點擊特定的頁碼，調用帶有特定參數的 getSubsequentData 處理程序，更新父組件的 state，這將更新 VendorsDetail 組件。

   常量父組件 = () => {

    const [data, setData] = useState({}) useEffect = (() => { // axios call to get initial data from the URL }) getSubsequentData = (URL) => { // axios call to get data based on the URL. // LInk this to pagination onClick } return( <VendorsDetail data={data} /> <Pagination getNextData={getSubsequentData}/>

   ) }