Reactjs reactstrap问题中的分页（更新）

在这里，我为表创建了分页（reactstrap）。后端有100条数据记录。我每页显示10条记录。当我更改页面时，它工作正常。我已经编写了一些显示页码的代码。最初，它应该显示1-5之间的页码。单击第5页时，页码应显示在6到10之间，依此类推。。请帮帮我。提前谢谢

import {getInitialUsers, getPageByPageUsers} from "services/userService";

const Users = () => {
 const [payloads, setPayloads] = useState({
  offset: 0,
  limit: 10,
  search: "",
  page: 1,
  rowsPerPage: 10,
  count: 0,
 });
const [start, setStartPage] = useState(0);
const [end, setEndPage] = useState(payloads.limit);
const [users, setUsers]= useState([]);
useEffect(() => {
 fetchInitialData();
}, []);
const fetchInitialData = async () => {
 try {
  let res = await getInitialUserRequests();
  setUsers(res.data.data)
  payloads.count = res.data.size;
  getPager(res.data.size, payloads.page); /* res.data.size means total number of records */
 } catch (err) {
  console.log("error")
 }
};
 const getPager = (count, page) => {
  let totalPages = Math.ceil(count / payloads.rowsPerPage);
 /* facing issues in the following conditions */
  if (totalPages <= 5) {
   setStartPage(1);
   setEndPage(totalPages);
  } else {
  if (page <= 5) {
    setStartPage(1);
    setEndPage(5);
  }
  if (page >= end - start) {
    setStartPage(end - start);
    setEndPage(end - start + 4);
  }
  if (page + 4 >= totalPages) {
    setStartPage(totalPages - 4);
    setEndPage(totalPages);
  }
  }
 };
const handleChangePage = async (e, newPage) => {
 payloads.page = newPage;
 try {
  let res = await getPageByPageUserRequests(newPage);
  setUsers(res.data.data)
 getPager(payloads.count, newPage);
 } catch (err) {
  console.log("error")
 }
};
return (
 <>
  <Container className="mt--7" fluid>
    <Row>
      <div className="col">
        <Card className="shadow">
          <CardHeader className="border-0">
            <h3 className="mb-0">Users</h3>
          </CardHeader>
          <Table className="align-items-center table-flush" responsive>
            <thead className="thead-light">
              <tr>
                <th scope="col">Username</th>
                <th scope="col">E-mail</th>
                <th scope="col">Phone Number</th>
               
              </tr>
            </thead>
            <tbody>
              {users.length > 0 ? (
                users.map((user) => (
                  <tr key={user.id}>
                    <td>{user.username}</td>
                    <td>{user.email}</td>
                    <td>{user.phone}</td>
                   
                  </tr>
                ))
              ) : (
                <tr className="text-center">
                  <th colSpan="5">No Data Found!!</th>
                </tr>
              )}
            </tbody>
          </Table>
          <CardFooter className="py-4">
            <nav aria-label="...">
              <Pagination
                className="pagination justify-content-end mb-0"
                listClassName="justify-content-end mb-0"
              >
                <PaginationItem
                  className={payloads.page <= 1 && `disabled`}
                >
                  <PaginationLink
                    href="#"
                    onClick={(e) => handleChangePage(e, payloads.page - 1)}
                    tabIndex="-1"
                  >
                    <i className="fas fa-angle-left" />
                    <span className="sr-only">Previous</span>
                  </PaginationLink>
                </PaginationItem>
                {[
                  ...Array(
                    Math.ceil(payloads.count / payloads.rowsPerPage)
                  ),
                ].map((page, i) => {
                  if (i >= start && i < end) {
                    return (
                      <PaginationItem
                        className={i === payloads.page ? `active` : ""}
                        key={i}
                      >
                        <PaginationLink
                          tag="button"
                          onClick={(e) => handleChangePage(e, i)}
                        >
                          {i}
                        </PaginationLink>
                      </PaginationItem>
                    );
                  }
                })}

                <PaginationItem
                  className={
                    payloads.page ==
                      Math.ceil(payloads.count / payloads.rowsPerPage) ?
                    `disabled`:''
                  }
                >
                  <PaginationLink
                    href="#"
                    onClick={(e) => handleChangePage(e, payloads.page + 1)}
                  >
                    <i className="fas fa-angle-right" />
                    <span className="sr-only">Next</span>
                  </PaginationLink>
                </PaginationItem>
              </Pagination>
            </nav>
          </CardFooter>
        </Card>
      </div>
    </Row>
  </Container>
  </>
  );
 };

从“服务/userService”导入{getInitialUsers，getPageByPageUsers}；
常量用户=（）=>{
const[payloads，setPayloads]=useState({
偏移量：0，
限额：10，
搜索：“，
页码：1，
行页码：10，
计数：0，
});
const[start，setStartPage]=useState（0）；
const[end，setEndPage]=useState（有效载荷.limit）；
const[users，setUsers]=useState（[]）；
useffect（（）=>{
fetchInitialData（）；
}, []);
const fetchInitialData=async（）=>{
试一试{
让res=等待getInitialUserRequests（）；
设置用户（res.data.data）
payloads.count=res.data.size；
getPager（res.data.size，payloads.page）；/*res.data.size表示记录总数*/
}捕捉（错误）{
console.log（“错误”）
}
};
常量getPager=（计数，页面）=>{
让totalPages=Math.ceil（count/payloads.rowsPerPage）；
/*在以下情况下面临的问题*/
如果（totalPages=totalPages）{
设置起始页（共页-4页）；
setEndPage（总页数）；
}
}
};
const handleChangePage=async（e，newPage）=>{
payloads.page=newPage；
试一试{
let res=等待getPageByPageUserRequests（newPage）；
设置用户（res.data.data）
getPager（payloads.count，newPage）；
}捕捉（错误）{
console.log（“错误”）
}
};
返回(
使用者
用户名
电子邮件
电话号码
{users.length>0(
users.map（（用户）=>(
{user.username}
{user.email}
{user.phone}
))
) : (
找不到数据！！
)}
以前的
{[
…阵列(
Math.ceil（payloads.count/payloads.rowsPerPage）
),
].map（（第页，i）=>{
如果（i>=开始和&i<结束）{
返回(
handleChangePage（e，i）}
>
{i}
);
}
})}
handleChangePage（e，payloads.page+1）}
>
下一个
);
};

对此，我通常使用一个简单的数学公式

data?.slice(pageNumber * rowsPerPage, pageNumber * rowsPerPage + rowsPerPage)?.map((row, index){
<div key={index}>{row}</div>
})

data？.slice（页码*rowsPerPage，页码*rowsPerPage+rowsPerPage）？.map（（行，索引）{
{row}
})

谢谢您的回复。假设我有10页。每页显示10行。。数据在更改页面时正确显示。我面临显示分页编号的问题。与最初一样，它应该显示从1到5的页码。单击第5页时，它应该显示从6到10…依此类推。您可以从后端发送项目总数，然后在前端，您可以编写页面逻辑