React/Typescript 中的分页

Question

所以我正在尝试实现分页功能。 在这里，我有加密 API 和一个数据所在的表，我想要实现的是每页显示 10 个项目。 真正的问题是它没有显示任何错误，但它不起作用。 当我单击下一页按钮时，我正在更改 pageNumber，但它没有更改数据。 我想不出问题出在哪里。

硬币组件

import React,  {lazy, Suspense, useEffect, useState} from 'react'
import {Coin} from '../../interface'
import './Coins.css'
import Pagination from "./Pagination";
const CoinTable = lazy(() => import('../../components/CoinData/CoinTable'))



 export const Coins:React.FC = () => {
  const [coinsData, setCoinsData] = useState<Coin[]>([])
  const [page, setPage] = useState(1);
  const [totalPages, setTotalPages] = useState(10);


  const handlePrevPage = (prevPage: number) => {
    setPage((prevPage) => prevPage - 1);
  };

  const handleNextPage = (nextPage: number) => {
    setPage((nextPage) => nextPage + 1);
  };
   
  

    
    const fetchData= async()=>{
      const response= await fetch(`https://api.coingecko.com/api/v3/coins/markets? 
      vs_currency=usd&order=market_cap_desc&?${page}&per_page=10&sparkline=false`)
      const result = await response.json()
          setCoinsData(result); 
          setTotalPages(totalPages);
      }
      
      useEffect(()=>{
          fetchData()
      })
    return (
        <>
          <Suspense fallback={<div>Loading...</div>}>
          <table className="table" width="80%">  
        <thead>
          <tr>
            <th>Cryptocurrencies</th>
            <th>Price</th>
            <th>24H Change</th>
            <th>Market Cap</th>
          </tr>
        </thead>
        </table>
          {coinsData.map((coin)=>
         <CoinTable key={coin.id}
               {...coin}
                />
          )}
           <Pagination
            totalPages={totalPages}
            currentPage={page}
            handlePrevPage={handlePrevPage}
            handleNextPage={handleNextPage}
          />
          </Suspense>   
         </>
    )
}

分页

import React, {  } from "react";
import PropTypes from "prop-types";

 interface Props {
    currentPage: number;
    totalPages: number;
    handleNextPage: (page: number) => void;
    handlePrevPage: (page: number) => void;
  }
const Pagination:React.FC <Props>= ({
  currentPage,
  totalPages,
  handlePrevPage,
  handleNextPage,
}) => {
  return (
    <div className="pagination-button-wrapper">
      <button
        className="pagination-button"
        onClick={() => handlePrevPage(currentPage)}
        disabled={currentPage === 1}
      >
        &larr;
      </button>

      <span className="pagination-page-info">
        Page {currentPage} of {totalPages}
      </span>

      <button
        className="pagination-button"
        onClick={() => handleNextPage(currentPage)}
        disabled={currentPage === totalPages}
      >
       
      </button>
    </div>
  );
};

Pagination.propTypes = {
    currentPage: PropTypes.number.isRequired,
    totalPages: PropTypes.number.isRequired,
    handlePrevPage: PropTypes.func.isRequired,
    handleNextPage: PropTypes.func.isRequired,
  };

export default Pagination

Answer 1

当page更改时，您的useEffect不会重新运行。 将其添加到依赖数组中，以便在更改时获取新数据：

useEffect(()=>{
  fetchData()
}, [page])

编辑：根据代码框，URL 应该是：

https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&page=${page}&per_page=10&sparkline=false

而不是c&?${page}& 。