javascript - React/Typescript 中的分页
问题描述
所以我正在尝试实现分页功能。在这里,我有加密 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}
>
←
</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
解决方案
推荐阅读
- spam - SPF 和 DMARC PASS,但域 XXX 的 DKIM“失败”?
- c# - 使用 puppeteer-sharp将文本抓取到一个类中
- c - MPLAB XC8 编译器错误:“声明中没有标识符”
- c# - EF Core 3.1 - 如何使用 InMemory Provider 检测客户端评估错误?
- angular - 无法使用 ng 执行 Angular 应用程序
- node.js - 我想通过 SendGrid 将邮件发送到我从 sequelize 查询中获得的特定 id,但邮件无法发送到从表中获取的邮件
- oracle11g - 与 Insert 语句一起使用时,有效的选择查询返回 Not a group by expression 错误
- django - 从 Django 中的多个页面调用视图
- javascript - 如何在 nuxt 中使用 Axios 模块和 vuejs 设置标头
- laravel - 如何使用 laravel 急切加载条件