Javascript 面临分页问题，50个项目中仅呈现40个

我面临一个分页的问题，我有50个项目在一个列表中，但能够呈现40，我希望所有的项目应该呈现，一旦他们到达结束，下一步按钮应该被禁用。 但目前，它在达到索引点40时被禁用

代码沙盒链接：

我已经试过了

function ListTable() {
  const [currentPage, setCurrentPage] = useState(1);
  const [itemsperPage, setItemsperPage] = useState(10);
  const [pageNumberLimit, setpageNumberLimit] = useState(5);
  const [maxPageNumberLimit, setmaxPageNumberLimit] = useState(5);
  const [minPageNumberLimit, setminPageNumberLimit] = useState(0);
  const pages = [];
  for (let i = 0; i < Math.ceil(data.length / itemsperPage); i++) {
    pages.push(i);
  }

  const indexOfLastItems = currentPage * itemsperPage;
  const indexOfFirstItem = indexOfLastItems - itemsperPage;
  const currentItems = data.slice(indexOfFirstItem, indexOfLastItems);

  const handleNextBtn = () => {
    setCurrentPage(currentPage + 1);
    if (currentPage + 1 > maxPageNumberLimit) {
      setmaxPageNumberLimit(maxPageNumberLimit + pageNumberLimit);
      setminPageNumberLimit(minPageNumberLimit + pageNumberLimit);
    }
  };
  const handlePrevBtn = () => {
    setCurrentPage(currentPage - 1);
    if ((currentPage - 1) % pageNumberLimit === 0) {
      setmaxPageNumberLimit(maxPageNumberLimit - pageNumberLimit);
      setminPageNumberLimit(minPageNumberLimit - pageNumberLimit);
    }
  };
  return (
    <>
      <ul style={{ display: "flex", listStyleType: "none" }}>
        <li>
          <button
            type="button"
            onClick={handlePrevBtn}
            disabled={currentPage === pages[0]}
          >
            Previous
          </button>
          <button
            type="button"
            onClick={handleNextBtn}
            disabled={currentPage === pages[pages.length - 1]}
          >
            {currentPage}Next {pages[pages.length]}
          </button>
        </li>
      </ul>
      <div className="list table-responsive" aria-label="transactionTable">
        <table className="table table-sm transactionTable">
          <tbody className="customTbody" data-testid="tableData">
            {currentItems.map((d, indx) => (
              <tr
                className="tableRow"
                data-testid={`${indx + 1}dataRow`}
                key={d.id}
              >
                <td>{d.id}</td>
                <td>{d.name}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </>
  );
}

函数列表表（）{
const[currentPage，setCurrentPage]=useState（1）；
const[itemsperPage，setItemsperPage]=useState（10）；
常量[pageNumberLimit，setpageNumberLimit]=useState（5）；
const[maxPageNumberLimit，setmaxPageNumberLimit]=useState（5）；
常量[minPageNumberLimit，setminPageNumberLimit]=useState（0）；
常量页=[]；
for（设i=0；i{
设置当前页面（当前页面+1）；
如果（currentPage+1>maxPageNumberLimit）{
设置maxPageNumberLimit（maxPageNumberLimit+pageNumberLimit）；
设置minPageNumberLimit（minPageNumberLimit+pageNumberLimit）；
}
};
const handlePrevBtn=（）=>{
设置当前页面（当前页面-1）；
如果（（当前页面-1）%pageNumberLimit==0）{
设置maxPageNumberLimit（maxPageNumberLimit-pageNumberLimit）；
设置minPageNumberLimit（minPageNumberLimit-pageNumberLimit）；
}
};
返回(


以前的
{currentPage}下一个{pages[pages.length]}


{currentItems.map（（d，indx）=>(
{d.id}
{d.name}
))}
);
}