Material-ui 使用 React hooks 分页

Question

我正在使用 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 函数作为 prop 传递给分页组件，如下所示：

<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>
  );
};

我也创建了一个codesandbox，这里是link

Answer 1

在您的 handlePageChange 上，您正在设置 currentPage 状态，触发 useEffect 调用 fetchBeerData(currentPage) 那么你又在调用 fetchBeerData(currentPage)

 const handlePageChange = e => {
   setCurrentPage(e.target.innerText);
  // fetchBeerData(currentPage);
   console.log('page nr:', e.target);
 };

Material-ui 使用 React hooks 分页

Material-ui pagination using React hooks

pagination

reactjs

material-ui

react-hooks

react-state