Next.js+React博客分页组件页码不显示问题排查

核心问题 #

页码无法显示的直接原因在components/Pagination.jsx的遍历渲染逻辑：

• pageNumbers.map的回调函数使用花括号包裹，但没有写return返回JSX节点，React遍历后拿到的全是undefined，不会渲染任何内容，这类语法逻辑问题不会触发控制台报错。
• 其余两个影响功能正常使用的问题：
  • Pagination组件放在grid布局容器下未分配列宽，会出现布局错位
  • 未传入页码切换的状态方法，就算页码渲染完成点击也无法切换分页

修正代码 #

1. 修复components/Pagination.jsx #

补全return逻辑，新增分页切换能力、当前页高亮、上下页按钮，同时给组件加上适配grid布局的类名：

import React from 'react'

const Pagination = ({postsPerPage, totalPosts, currentPage, setCurrentPage}) => {
    const pageNumbers = []
    const totalPages = Math.ceil(totalPosts / postsPerPage)

    for(let i = 1; i <= totalPages; i++){
        pageNumbers.push(i)
    }

    const paginate = (pageNum) => {
        if(pageNum < 1 || pageNum > totalPages) return
        setCurrentPage(pageNum)
        window.scrollTo({top: 0, behavior: 'smooth'})
    }

  return (
    <div className='col-span-1 lg:col-span-8 flex justify-center mt-6'>
    <nav className="page navigation">
        <ul className="flex list-style-none gap-2">
            <li className="page-item">
                <button 
                    onClick={() => paginate(currentPage - 1)}
                    disabled={currentPage === 1}
                    className="px-3 py-1 rounded border disabled:opacity-50"
                >
                    上一页
                </button>
            </li>
            {/* 花括号改圆括号，直接返回JSX节点 */}
            {pageNumbers.map(number => (
                <li key={number} className="page-item">
                    <button 
                        onClick={() => paginate(number)}
                        className={`px-3 py-1 rounded border ${currentPage === number ? 'bg-pink-600 text-white border-pink-600' : ''}`}
                    >
                        {number}
                    </button>
                </li>
            ))}
            <li className="page-item">
                <button 
                    onClick={() => paginate(currentPage + 1)}
                    disabled={currentPage === totalPages}
                    className="px-3 py-1 rounded border disabled:opacity-50"
                >
                    下一页
                </button>
            </li>
        </ul>
    </nav>
    </div>
  )
}

export default Pagination

2. 调整pages/index.jsx的Pagination调用位置和传参 #

将Pagination移入文章列表所在列，传入分页状态控制方法，修正grid布局问题：

<div className="grid grid-cols-1 lg:grid-cols-12 gap-12">
  <div  className='lg:col-span-8 col-span-1'>
    {currentPosts.map((post) => <PostCard post={post.node} key={post.title}/>)}
    <Pagination 
      postsPerPage={postsPerPage} 
      totalPosts={posts.length}
      currentPage={currentPage}
      setCurrentPage={setCurrentPage}
    />
  </div>

  <div className="lg:col-span-4 col-span-1">
    <div className="lg:sticky relative top-8">
      <PostWidget />
      <Categories />
    </div>
  </div>
</div>

补充说明 #

当前postsPerPage初始值设为1，每页仅展示1篇文章，功能验证完成后可根据需求调整为合适的数值（如6、10）。

内容的提问来源于stack exchange，提问作者Chidimma Nworah