我想限制 React js 中的分页数？答案

【问题标题】：I want to limit amount of pagination numbers in React js?我想限制 React js 中的分页数？
【发布时间】：2021-08-05 06:18:36
【问题描述】：

我要限制分页数量！我正在使用 useEffect 和 Axios 从后端获取页数！在循环这些数字并在 JSX 中显示它们之后！但我不能限制这个数字！你可以帮帮我吗？这是代码...

const [pageNumber, setPageNumber] = useState();

这里我使用使用参数从 URL 中获取 pagenumlink！

const params = useParams();
  // console.log(params);
let pageNumLink = params.page;

在我使用 useEffect 从后端获取页码之后！

useEffect(() => {
    const fetchBlogs = async () => {
      try {
        const res = await axios.get(
          `${process.env.REACT_APP_API_URL}/article/list/${pageNumLink}`
        );
        setArticleData(res.data.articles);
        setPageNumber(res.data.pageCount);
      } catch (err) {}
    };
    fetchBlogs();
  }, [pageNumLink]);

在我为它循环页码之后！

  var pagesArray = [];
  for (let i = 1; i <= pageNumber; i++) {
    pagesArray.push(<Link to={`/articles/${i}`}>{i}</Link>);
  }

将其放入 JSX 之后：

<div>
   {pagesArray}
</div>

结果是 1 2 3 4 5 6 7 8 9！！那么我该如何限制这一点并得到这个结果！ 1 2 3 ... 9！提前谢谢！

【问题讨论】：

设置一个限制，一旦达到这个限制就退出循环。对于最后一页，只需将其从数组中弹出即可。

标签： javascript reactjs pagination react-router react-hooks

【解决方案1】：

获取当前页面和总页数。假设您的当前页数为 1，总数为 9。将当前页码和总页数保存在变量中。

如果逻辑是当前页面（1），接下来的两页（2, 3），最后一页（9）应该出现，你需要创建组件给你：

(pageNumber, pageNumber + 2, pageNumber + 3 ... totalPages)

我认为您不需要循环或映射，因为您事先知道输出。只需执行以下操作：

<Link to={`/articles/${i}`}>{pageNumber}</Link>
<Link to={`/articles/${i}`}>{pageNumber + 2}</Link>
<Link to={`/articles/${i}`}>{pageNumber + 3}</Link>
... <Link to={`/articles/${i}`}>{totalPages}</Link>

要处理的情况：当前页是总页数，或在总页数的 2 以内。（例如第 7、8、9 页）。在这种情况下，您将不想显示 ...9。添加一个条件来说明这一点。

<Link to={`/articles/${pageNumber}`}>{pageNumber}</Link>
<Link to={`/articles/${pageNumber + 2}`}>{pageNumber + 2}</Link>
<Link to={`/articles/${pageNumber + 3}`}>{pageNumber + 3}</Link>
if(currentPage <== totalPages - 2) {
   ... <Link to={`/articles/${totalPages}`}>{totalPages}</Link>
}

显然，上述内容需要您使用的任何格式/样式。

【讨论】：