Javascript 如何使用React钩子正确构建动态分页组件

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

在让你们读更多之前，我的状态是这样的：

我从一个组件调用它，我从MongoDB获取帖子

从那以后，我在使用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;

从“React”导入React；
const setPagination=（{limit，totalPosts，paginate}）=>{
常量页码=[]；
for（设i=1；i(


))}

);
};
导出默认设置分页；

现在，我正在尝试使用url中的查询字符串：

http://localhost:3000/posts?page=1&limit=1

有谁能告诉我我缺少的逻辑吗？这个xD让我头疼

编辑：对不起，我没有说清楚。这就是问题所在：

---

它不应该创建更多的页面吗？

问题出在哪里，或者更好的是，问题出在哪里？问题是它只创建了一个页面。