如何解决使用 React 钩子的 Material-ui 分页
我正在使用 API 来获取数据并将其呈现到卡片中。我想添加分页,为此我使用了 React Pagination component。 我每页渲染 9 张卡片,页码和卡片数量由 API url 决定。 问题是,当我单击分页按钮时,它似乎调用了两次 API,一次用于第一页,另一次用于我请求的页面。我不确定我在这里做错了什么。
这是我获取数据并尝试更新页码的部分:
useEffect(() => {
fetchBeerData(currentPage);
},[currentPage]);
const fetchBeerData = async pageNumber => {
try {
const { data } = await axios.get(
`https://api.punkapi.com/v2/beers?page=${pageNumber}&per_page=9`
);
console.log(data);
setBeers(data);
} catch (err) {
console.log(err);
}
};
const handlePageChange = e => {
setCurrentPage(e.target.innerText);
fetchBeerData(currentPage);
console.log('page nr:',e.target);
};
我将 handlePageChange
函数作为道具传递给分页组件,如下所示:
<PaginationButtons
handlePageChange={handlePageChange}
page={currentPage}
/>
这是分页组件:
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Pagination from '@material-ui/lab/Pagination';
const useStyles = makeStyles(theme => ({
root: {
'& > *': {
marginTop: theme.spacing(2),},}));
export const PaginationButtons = ({ handlePageChange }) => {
const classes = useStyles();
return (
<div className={classes.root}>
<Pagination
count={10}
hidePrevButton
hideNextButton
size='large'
onChange={e => handlePageChange(e)}
/>
</div>
);
};
我也创建了一个代码沙盒,这是link
解决方法
在您的 handlePageChange 上,您正在设置 currentPage 状态,该状态触发 useEffect 调用 fetchBeerData(currentPage) 然后再次调用 fetchBeerData (当前页面)
const handlePageChange = e => {
setCurrentPage(e.target.innerText);
// fetchBeerData(currentPage);
console.log('page nr:',e.target);
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。