React分页搜索组件仅展示10条结果的数值计算bug排查

问题修复方案 #

根因定位 #

你怀疑的两处代码确实是问题核心，本质是用来计算总结果、总页数的数据源错误，同时最大页数的计算逻辑本身存在缺陷：

1. 你当前用movies.length统计总结果数是错误的：movies数组仅存储当前页要渲染的10条数据，长度永远等于单页最大条数，自然统计结果最多只显示10条。
2. 最大页数计算逻辑存在两个问题：一是用了错误的movies.length作为计算基数，二是用Math.floor向下取整会丢失余数对应的最后一页，比如总共有15条数据、每页10条的情况下，Math.floor(15/10)=1，实际应该有2页。

修复步骤 #

根据你的分页实现场景二选一即可：

场景1：前端全量过滤分页（已提前拿到所有匹配数据）

你需要额外定义一个变量存储全量匹配结果，不要用当前页的切片数据计算总数值：

• 总结果统计代码修改为：<span>{全量匹配数组.length} results found</span>
• 最大页数计算代码修改为：const maxPages = Math.ceil(全量匹配数组.length / PAGE_SIZE);
• 切页时从全量匹配数组中切片取出对应页的10条数据赋值给movies用于渲染即可。

场景2：后端接口分页（每页请求对应页的数据）

你需要在请求接口时单独存储后端返回的总匹配条数字段：

• 总结果统计代码修改为：<span>{totalCount} results found</span>
• 最大页数计算代码修改为：const maxPages = Math.ceil(totalCount / PAGE_SIZE);
• 每次翻页/搜索请求时，将接口返回的总条数赋值给totalCount、当前页数据赋值给movies即可。

示例代码（前端全量过滤场景） #

import { useState, useEffect } from 'react'

const PAGE_SIZE = 10

function MovieSearch() {
  // 存储所有匹配的全量电影数据
  const [filteredMovies, setFilteredMovies] = useState([])
  // 存储当前页要渲染的10条电影数据
  const [movies, setMovies] = useState([])
  const [currentPage, setCurrentPage] = useState(1)

  // 计算总页数用全量数据长度，向上取整
  const maxPages = Math.ceil(filteredMovies.length / PAGE_SIZE)

  // 页码变化时更新当前页渲染数据
  useEffect(() => {
    const startIndex = (currentPage - 1) * PAGE_SIZE
    const endIndex = startIndex + PAGE_SIZE
    setMovies(filteredMovies.slice(startIndex, endIndex))
  }, [currentPage, filteredMovies])

  return (
    <div>
      {/* 总结果统计用全量数据长度 */}
      <span>{filteredMovies.length} results found</span>
      {/* 渲染当前页电影列表 */}
      {movies.map(movie => <div key={movie.id}>{movie.name}</div>)}
    </div>
  )
}

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