如何让分页按钮在 Next Js App 路由器中显示？

Question

我正在尝试创建一个搜索结果页面。但现在我专注于分页。我确保分页能够按预期工作并显示一系列结果。我现在专注于 Next.js 前端。

我在尝试在“上一页”和“下一页”按钮之间显示分页按钮时遇到问题。仅显示第一个按钮，我认为这是因为我的 PaginationNumbers 组件。

'use client';
import Link from "next/link";
import Search from "./search";
import React, { useEffect, useState } from "react";

const results = [...]

export default function SearchResults() {
    const [page, setPage] = useState(0); 

    const List = () => {
        return (
            <>
            {
                results.slice(page * 10, page * 10 + 10).map((result) => {
                    return (
                        <div>
                            <p>{result.name}</p>
                            <p>{result.url}</p>
                            <p>{result.description}</p>
                            <p>{result.categories}</p>
                            <p>{result.upvotes}</p>
                            <p>{result.downvotes}</p>
                        </div>
                    )
                })
            }
            </>
        )
    }

    const prevPage = () => {...}

    const nextPage = () => {...}

    const PaginationNumbers = () => {
        if (page < NOP()) {
            for (let i = 0; i < NOP(); i++) {
                return (
                    <button onClick={() => setPage(i)}>
                        {i}
                    </button>
                )
            }
        }
    }

    const NOP = () => {
       const numberOfPages = Math.ceil(results.length / 10);
       return numberOfPages;
    }
    return (
        <div className="flex flex-col justify-center items-center">
            <div>
                <Search/>
            </div>
            <div>
                <List/>
            </div>
            <div>
                <button onClick={prevPage}>Prev</button>
                <PaginationNumbers/>
                <button onClick={nextPage}>Next</button>
            </div>
        </div>
    )
}

Answer 1

问题是您在循环内使用了

return

语句。在 JavaScript 中，

return

语句立即退出函数并返回一个值，因此在您的情况下，它会在第一次迭代后停止循环，这就是只显示第一个按钮的原因。

这里我们可以先创建一个空的

buttons

数组。然后在循环中，我们可以将每个按钮元素

push

添加到

buttons

数组中。最后我们返回

buttons

数组，它将渲染所有分页按钮。

const PaginationNumbers = () => {
  const numberOfPages = NOP(); // Calculate number of pages once and store it in a variable
  let buttons = [];

  if (page < numberOfPages) {
    for (let i = 0; i < numberOfPages; i++) {
      buttons.push(
        <button key={i} onClick={() => setPage(i)}>
          {i + 1} {/* Start numbering pages from 1 */}
        </button>
      );
    }
  }

    return <>{buttons}</>; // Return all buttons as a React fragment
};

我已将

NOP

计算移到循环之外，以避免冗余计算。另请注意，我已将

{i}

更改为

{i + 1}

，因为数组索引从 0 开始，但我们通常希望页码从 1 开始。