react js中存在分页问题

Question

我想创建简单的分页，但我一直在出错，我确切地知道问题是什么，但我不确定如何解决，问题是数据调用，如果调用data.list在getComments中项目加载，但分页不会，因为在handlePageClick中它是data.selected

这是我的api：

{
"count": 1134,
"list": [
{
"brand": "28147",
"category": "Bakery, Bagels, Buns & Rolls",
"code": "20641213_EA",
"description": "In Store Baked White Submarine Rolls Pkg. of 4",
"id": "630b710efe3e956401de6c09",
"image": "https://assets.shop.loblaws.ca/products/20641213/b1/en/front/[e-mail]",
"inStock": "OK",
"measurement": "130 g",
"name": "Submarine Buns 4 Pack",
"price": 3.99,
"price_type": "SOLD_BY_EACH",
"store": "realcanadiansuperstore"
....
},

这是我的代码：

function CategoryPage() {
const {onAdd} = useStateContext();
const [items, setItems] = useState([]);
const [pageCount, setpageCount] = useState(0);
let limit = 40;
const {category, store} = useParams();

useEffect(() => {
const getComments = async () => {
const res = await fetch(
`https://api/find? 
store=${store}&category=${category}&pages=0&items=${limit}`
);
const data = await res.json();
const total = data.count;
setpageCount(Math.ceil(total / limit))
setItems(data.list);
};
getComments();
}, [limit]);
const fetchComments = async (currentPage) => {
const res = await fetch(
`https://api/find? 
store=${store}&category=${category}&pages=${currentPage}&items=${limit}`
);
const data = await res.json();
return data;
};
const handlePageClick = async (data) => {
console.log(data.selected);
let currentPage = data.selected + 1;
const commentsFormServer = await fetchComments(currentPage);
setItems(commentsFormServer);
};

这就是我映射数据的方式：

{items.map((product, index) => (
... )}

这就是我调用handlePageClick的地方，我使用的是react paginate:

<ReactPaginate
previousLabel={"previous"}
nextLabel={"next"}
breakLabel={"..."}
pageCount={pageCount}
marginPagesDisplayed={2}
pageRangeDisplayed={3}
onPageChange={handlePageClick}
containerClassName={"pagination justify-content-center"}
pageClassName={"page-item"}
pageLinkClassName={"page-link"}
previousClassName={"page-item"}
previousLinkClassName={"page-link"}
nextClassName={"page-item"}
nextLinkClassName={"page-link"}
breakClassName={"page-item"}
breakLinkClassName={"page-link"}
activeClassName={"active"}
/>   

Answer 1

我想我看到了。fetchComments应该返回data.list，而不仅仅是data。

顺便说一句，你认为的问题实际上并不是一个。handlePageClick中的data与您的项目状态无关。这是一个不同的对象react paginate正在传递给该处理程序，以描述用户触发的新状态更改。我可能会将其重命名为event以使其更清晰。