Chakra UI 分页组件中页码显示问题的分析与修复

问题背景

在Chakra UI的分页组件(Pagination)使用过程中，开发者发现了一个关于页码显示的异常现象。当使用紧凑模式(compact)或简短模式(short)时，无论总页数有多少，页码显示中的总页数部分始终不会超过7。例如，即使实际总页数为10，组件仍然显示"1 of 7"。

问题根源分析

经过深入排查，发现问题出在组件内部实现逻辑上。分页组件在计算总页数时，错误地使用了pages.length而非totalPages变量。这里的pages对象实际上是一个经过优化的分页项数组，它包含了当前页附近的几个页码和省略号(ellipsis)占位符，因此其长度被限制在7以内。

技术细节

在Chakra UI的分页组件实现中，存在两个关键变量：

1. pages - 经过优化的分页项数组，包含当前页附近的页码和省略符
2. totalPages - 根据总数据量和每页大小计算出的实际总页数

原始实现错误地使用pages.length来显示总页数，而实际上应该使用totalPages。这种混淆导致了显示上的限制。

解决方案

修复方案非常简单直接：将显示逻辑中的pages.length替换为totalPages。具体修改如下：

const { page, pageRange, count, totalPages } = usePaginationContext()
const content = useMemo(() => {
  if (format === 'short') return `${page} / ${totalPages}`
  if (format === 'compact') return `${page} of ${totalPages}`
  return `${pageRange.start + 1} - ${pageRange.end} of ${count}`
}, [format, page, pageRange, count, totalPages])

修复效果

修改后，分页组件能够正确显示实际的总页数。例如，当总数据量为20，每页显示2条时，组件会正确显示"1 of 10"而非错误的"1 of 7"。

总结

这个问题的修复体现了组件库开发中一个常见的设计考量：内部优化数据结构与对外展示数据之间的区别。开发者需要清晰地分离这两者，确保用户看到的是准确的信息而非内部优化的中间结果。Chakra UI团队已经将这个修复纳入最新版本，用户只需升级即可获得正确的分页显示功能。

对于开发者而言，这个案例也提醒我们在使用组件库时，如果发现显示数据与预期不符，可以深入查看组件实现，往往能够发现类似的数据源选择问题。