尝试使用React Bootstrap分页显示数组中的项目

Question

所以我在从数组加载更多项时遇到了一些小麻烦。我已经让它显示前四个项目，但当我单击分页项目时，它不会显示下一个项目。我使用React Bootstrap中的分页组件，因为它是我项目的主要框架。

const [pagination, setPagination] = useState({
data: names,
offset: 0,
numberPerPage: 4,
pageCount: 0,
currentData: [],
activePage: 1
});
useEffect(() => {
setPagination((prevState) => ({
...prevState,
pageCount: prevState.data.length / prevState.numberPerPage,
currentData: prevState.data.slice(
pagination.offset,
pagination.offset + pagination.numberPerPage
)
}));
}, [pagination.numberPerPage, pagination.offset]);
const handlePageClick = (event) => {
const selected = event.selected;
const offset = selected * pagination.numberPerPage;
const activePage = selected + 1;
setPagination({ ...pagination, offset, activePage });
};
// Pagination items
const paginationItems = [];
const amountPages = pagination.data.length / pagination.numberPerPage;
for (let number = 1; number <= amountPages; number++) {
paginationItems.push(
<Pagination.Item
onClick={handlePageClick}
key={number}
active={number === pagination.activePage}
>
{number}
</Pagination.Item>
);
}
return (
<div className="list">
<Container>
{pagination.currentData &&
pagination.currentData.map((item, index) => (
<div key={index} className="post">
<h3>{item.name}</h3>
</div>
))}
<Pagination>{paginationItems}</Pagination>
</Container>
</div>
);

以下是我正在使用的代码沙盒示例：https://codesandbox.io/s/react-bootstrap-pagination-mp9l8?file=/src/App.js

Answer 1

当您有一个对象作为状态时，您应该使用useReducer更改状态。首先，你应该在页面组件上设置Onclick，而不是Pagonation.Item，我还为每个页面设置了数据页面属性。Item用于访问handleClick函数。

import React, { useReducer, useEffect } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Container, Pagination } from "react-bootstrap";
export default function App({ content }) {
const reducer = (state, action) => {
switch (action.type) {
case "setPageCount":
return { ...state, pageCount: action.payload };
case "setCurrentData":
return { ...state, currentData: action.payload };
case "setOffset":
return { ...state, offset: action.payload };
case "setActivePage":
return { ...state, activePage: action.payload };
default:
throw new Error();
}
};
const initialState = {
data: names,
offset: 0,
numberPerPage: 4,
pageCount: 0,
currentData: [],
activePage: 1
};
const [state, dispatch] = useReducer(reducer, initialState);
useEffect(() => {
dispatch({
type: "setCurrentData",
payload: state.data.slice(
state.offset,
state.offset + state.numberPerPage
)
});
}, [state.numberPerPage, state.offset]);
const handleClick = (e) => {
const clickValue = parseInt(e.target.getAttribute("data-page"), 10);
dispatch({
type: "setOffset",
payload: (clickValue - 1) * state.numberPerPage
});
dispatch({
type: "setActivePage",
payload: clickValue
});
dispatch({
type: "setPageCount",
payload: state.data.length / state.numberPerPage
});
};
// Pagination numbers
const paginationItems = [];
const amountPages = state.data.length / state.numberPerPage;
for (let number = 1; number <= amountPages; number++) {
paginationItems.push(
<Pagination.Item
key={number}
active={number === state.activePage}
data-page={number}
>
{number}
</Pagination.Item>
);
}
return (
<div className="list">
<Container>
{state.currentData &&
state.currentData.map((item, index) => (
<div key={index} className="post">
<h3>{item.name}</h3>
</div>
))}
<Pagination onClick={handleClick}>{paginationItems}</Pagination>
</Container>
</div>
);
}

你可以在这里看到它是如何工作的