Javascript 我想限制React js中分页编号的数量？

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

const [pageNumber, setPageNumber] = useState();

在这里，我使用use params从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>);
  }

var pagesArray=[]；
for（设i=1；i获取当前页面和总页数。假设当前页面为1，总页数为9。将当前页面和总页数保存在变量中

如果逻辑是当前页面（1）、下两个页面（2、3）和最后一个页面（9）应该出现，则需要创建组件以提供：

（页码、页码+2、页码+3…总页数）

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

<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>

{pageNumber}
{pageNumber+2}
{pageNumber+3}
…{totalPages}

要处理的大小写：当前页是总页数，或在总页数的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>
}

{pageNumber}
{pageNumber+2}
{pageNumber+3}
if（currentPage）设置一个限制，一旦达到该限制，退出循环。对于最后一页，只需将其从数组中弹出即可。
<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>
}