React分页添加api数据，这是逐页的

Question

我正在使用API，它有数据分页，并希望在分页上显示它，下面是所提到的代码。有人能告诉我怎么做吗?基本上，每个页面有6个结果，我不知道如何显示结果使用分页点击。我用Axios获取API。编辑:- API是https://reqres.in/api/users?page=2，每个页面都有不同的数据。

import React, {useState, useEffect} from 'react'
import axios from 'axios'
import ReactPaginate from 'react-paginate';
import './App.css'
function App() {
const [offset, setOffset] = useState(0);
const [data, setData] = useState([]);
const [perPage] = useState(10);
const [pageCount, setPageCount] = useState(0)

const getData = async() => {
const res = await axios.get(`https://reqres.in/api/users`)
const data = res.data.data;
const slice = data.slice(offset, offset + perPage)
const postData = slice.map(pd => <div key={pd.id}>
<table>
<tr>
<th>{pd.id}</th>
<th>{pd.email}</th>
<th>{pd.first_name}</th>
<th>{pd.last_name}</th>
<img src={pd.avatar} alt=""/>
</tr>
</table>
</div>)
setData(postData)
setPageCount(Math.ceil(data.length / perPage))
}
const handlePageClick = (e) => {
const selectedPage = e.selected;
setOffset(selectedPage + 1)
};
useEffect(() => {
getData()
}, [offset])
return (
<div className="App">
{data}
<ReactPaginate
previousLabel={"prev"}
nextLabel={"next"}
breakLabel={"..."}
breakClassName={"break-me"}
pageCount={pageCount}
marginPagesDisplayed={2}
pageRangeDisplayed={5}
onPageChange={handlePageClick}
containerClassName={"pagination"}
subContainerClassName={"pages pagination"}
activeClassName={"active"}/>
</div>
);
}
export default App;

Answer 1

Hello在我的例子中，每页6条记录显示

const MyComponent = () => {
const [currentPage, setCurrentPage] = useState(0);
// Handle page change
const handlePageChange = (selectedPage) => {
setCurrentPage(selectedPage.selected);
};
// Generate some sample data
const data = Array.from(Array(50).keys());
// Define the number of items per page
const itemsPerPage = 6;
// Calculate the index range for the current page
const startIndex = currentPage * itemsPerPage;
const endIndex = startIndex + itemsPerPage;
// Get the current page items
const currentItems = data.slice(startIndex, endIndex);
return (
<div>
{/* Render your data using the currentItems */}
{currentItems.map((item) => (
<div key={item}>{item}</div>
))}
{/* Render the pagination component */}
<ReactPaginate
pageCount={Math.ceil(data.length / itemsPerPage)}
onPageChange={handlePageChange}
containerClassName="pagination"
activeClassName="active"
/>
</div>
);
};