如何在React中處理和顯示來自API的分頁數據

在React中處理和顯示來自API的分頁數據通常需要以下步驟：

1. 發送API請求：首先，您需要使用fetch或axios等工具發送API請求并獲取數據。您可以在組件的生命周期方法（如componentDidMount）中發送請求。

2. 處理API響應：一旦收到API的響應，您需要將數據存儲在組件的狀態中。通常，您可以使用useState鉤子來存儲數據。

3. 分頁數據：根據API返回的數據，您需要根據當前頁和每頁顯示的項目數來計算出需要顯示的數據。可以使用slice方法來分割數據。

4. 顯示數據：最后，您可以在渲染函數中使用map方法來遍歷數據并將其顯示在頁面上。您還可以在頁面上添加一些按鈕或鏈接來切換到下一頁或上一頁。

以下是一個簡單的示例代碼，演示如何在React中處理和顯示來自API的分頁數據：

import React, { useState, useEffect } from 'react';

const PaginationExample = () => {
  const [data, setData] = useState([]);
  const [currentPage, setCurrentPage] = useState(1);
  const [itemsPerPage, setItemsPerPage] = useState(5);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch(`https://api.example.com/data`);
      const result = await response.json();
      setData(result);
    };

    fetchData();
  }, []);

  const indexOfLastItem = currentPage * itemsPerPage;
  const indexOfFirstItem = indexOfLastItem - itemsPerPage;
  const currentItems = data.slice(indexOfFirstItem, indexOfLastItem);

  const handleNextPage = () => {
    setCurrentPage(currentPage + 1);
  };

  const handlePrevPage = () => {
    setCurrentPage(currentPage - 1);
  };

  return (
    <div>
      {currentItems.map(item => (
        <div key={item.id}>
          <p>{item.name}</p>
          <p>{item.description}</p>
        </div>
      )}
      
      <button onClick={handlePrevPage} disabled={currentPage === 1}>Previous Page</button>
      <button onClick={handleNextPage} disabled={currentItems.length < itemsPerPage}>Next Page</button>
    </div>
  );
};

export default PaginationExample;

在這個示例中，我們首先發送API請求并將數據存儲在data狀態中。然后，我們根據當前頁和每頁項目數計算出要顯示的數據，并將其映射到頁面上。最后，我們添加了兩個按鈕來切換到上一頁和下一頁。