如何使用React Hooks正确构建动态分页组件

Question

我正在尝试构建用于分页的可重用组件。

在让大家阅读更多内容之前，这是我的状态：

我从一个从MongoDB中获取帖子的组件中调用它。

从那里，我在用useEffect进行更改时遇到麻烦，在使用分页组件时，我什至不确定是否构建正确。

这是我的useEffect：

const params = new URLSearchParams(window.location.search);
const page = parseInt(params.get('page')) || 1;
const limit = parseInt(params.get('limit')) || 1;
const startIndex = (page - 1) * limit;
const endIndex = page * limit;
// const currentPosts = posts.slice(endIndex, startIndex);
const currentPosts = Object.entries(posts).slice(endIndex, startIndex);
console.log(currentPosts);

useEffect(() => {
  getPosts(null, null, page, limit);
  getCurrentProfile();
}, [getPosts, getCurrentProfile]);

// Change page
const paginate = pageNumber => page(pageNumber);

这是我在获取帖子的循环中调用的组件。

<Pagination
  limit={limit}
  totalPosts={posts.data.length}
  paginate={paginate}
/>

最后，这就是我使用组件的方式，显然它仍在进行中。

import React from 'react';

const setPagination = ({ limit, totalPosts, paginate }) => {
  const pageNumbers = [];

  for (let i = 1; i <= Math.ceil(totalPosts / limit); i++) {
    pageNumbers.push(i);
  }

  return (
    <nav>
      <ul className='pagination'>
        {pageNumbers.map(number => (
          <li key={number} className='page-item'>
            <a
              onClick={() => paginate(number)}
              href={`?page=${number}&limit=${limit}`}
              className='page-link'
            >
              {number}
            </a>
          </li>
        ))}
      </ul>
    </nav>
  );
};

export default setPagination;

现在，我正在尝试使其与我的url中的查询字符串一起使用： http://localhost:3000/posts?page=1&limit=1

有人能指导我我所缺少的逻辑吗？我对这个xD感到头疼。

编辑：很抱歉，我不清楚。这就是问题： 它不应该创建更多页面吗？