Next.js项目中React Paginate渲染多个ul而非页码的问题

开发Next.js项目时，集成了React Paginate（^8.2.0）组件，出现渲染多个<ul>而非正常页码的异常。问题表现：npm run dev开发环境下显示正常页码，但执行npm start构建运行后异常。

组件代码 #

<ReactPaginate
  previousLabel="Previous"
  nextLabel="Next"
  breakLabel="..."
  pageCount={filteredNftData?.totalPages}
  marginPagesDisplayed={1}
  pageRangeDisplayed={2}
  onPageChange={handlePageClick}
  containerClassName="pagination"
  subContainerClassName="pages pagination"
  activeClassName="active"
  forcePage={pageNum - 1}
/>

数据过滤逻辑 #

const filteredNftData = showNotMinted ? notMintedNftCardData : nftCardData;

API调用代码 #

const getwishlistApi = async (nextrprev, isMinted = false) => {
  let walletAddress;
  !account.address ? (walletAddress = "") : (walletAddress = account.address);
  try {
    let result = await getNftCards(categoryName, pageNum, walletAddress, isMinted);
    setNotMintedNftCardData(result);
    if (nextrprev) {
      tabsRef?.current?.scrollIntoView({
        behavior: "smooth",
        block: "start",
      });
    }
  } catch (error) {
    toast.error("Error fetching data:", error);
  }
  try {
    let result = await getNftCards(categoryName, pageNum, walletAddress);
    setNftCardData(result);
    if (nextrprev) {
      tabsRef?.current?.scrollIntoView({
        behavior: "smooth",
        block: "start",
      });
    }
  } catch (error) {
    toast.error("Error fetching data:", error);
  }
};

状态定义 #

const [nftCardData, setNftCardData] = useState([]);
const [notMintedNftCardData, setNotMintedNftCardData] = useState([]);

排查方向 #

1. 初始状态类型不匹配
   状态初始值设为[]数组，但API返回的是包含totalPages的对象。开发环境下React严格模式的双重渲染可能掩盖了filteredNftData?.totalPages为undefined的问题；生产环境中，React Paginate在pageCount无效时可能重复渲染默认结构。建议修改初始状态为空对象：

   const [nftCardData, setNftCardData] = useState({});
   const [notMintedNftCardData, setNotMintedNftCardData] = useState({});
   

2. 生产环境异步加载时序问题
   生产环境打包优化后组件渲染更快，可能在API返回数据前，filteredNftData仍为初始状态，导致分页组件接收到无效的pageCount。可添加加载判断，数据未就绪时不渲染分页：

   {filteredNftData?.totalPages && (
     <ReactPaginate
       // 保留原有属性
     />
   )}
   

3. 版本与打包兼容性
   检查react-paginate@8.2.0与Next.js生产环境的兼容性，尝试升级到最新稳定版，或排查打包时tree-shaking是否导致组件异常。

4. 重复渲染问题
   排查父组件是否存在不必要的重渲染，导致分页组件多次实例化。可使用React.memo包裹分页组件，或检查showNotMinted、pageNum等状态的更新是否过于频繁。

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