React分页组件显示条目数异常：设置PAGE_SIZE=8却显示10条求助

核心问题点 #

• 接口请求参数未使用自定义常量。你声明的PAGE_SIZE = 8没有同步到接口请求的页大小参数中，多数分页接口默认返回10条数据，前端直接渲染接口返回内容就会出现每页10条的情况。
• UI分页组件未显式绑定页大小。如果使用了Ant Design、Element UI等第三方UI库的Pagination组件，组件默认页大小为10，未显式传递pageSize={PAGE_SIZE}属性的话，组件会按10来处理分页逻辑。
• 前端数据截取逻辑错误。如果是前端对全量数据做分页，需要确认slice方法的参数计算正确，常见错误是起始/结束索引计算逻辑偏差，或者根本没有做前端截取，直接渲染全量数据的前10条。
• 常量引用拼写错误。JavaScript区分大小写，检查所有用到页大小的位置，变量名是否和定义的PAGE_SIZE完全一致，拼写错误会导致变量读取失败，自动 fallback 到默认值10。

修复步骤 #

1. 修正接口请求参数，将页大小字段赋值为你定义的常量：

// 错误写法
const res = await fetch('/api/movieList', {
  params: { page: currentPage, pageSize: 10 }
})
// 正确写法
const res = await fetch('/api/movieList', {
  params: { page: currentPage, pageSize: PAGE_SIZE }
})

2. 给分页组件显式传递页大小属性，覆盖默认值：

<Pagination
  current={currentPage}
  total={total}
  pageSize={PAGE_SIZE} // 必须显式传入
  onChange={setCurrentPage}
/>

3. 校验前端分页截取逻辑：

// 正确的当前页数据计算逻辑，currentPage从1开始计数
const start = (currentPage - 1) * PAGE_SIZE
const end = currentPage * PAGE_SIZE
const currentList = movieList.slice(start, end)

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