ReactJS搜索功能无法检索分页全页内容，该如何解决？

你的问题核心是分页与过滤的顺序搞反了：当前逻辑是先从全量数据里截取当前页的小范围数据，再对这个子集做过滤，自然只能搜到当前页的内容。正确流程应该是先对全量数据做过滤，再针对过滤后的结果进行分页计算。

修改步骤 #

1. 先基于搜索关键词过滤全量数据，得到完整的搜索结果集
2. 用过滤后的结果集计算分页参数（总页数、当前页要显示的数据）
3. 搜索关键词变化时自动重置当前页为第1页，避免出现过滤后数据不足当前页导致的空列表问题

修改后的完整代码示例 #

import { useState, useEffect } from 'react';

// ... 导入你的Card、Pagination组件及moviedata数据

const MovieList = () => {
  const [currentPage, setCurrentPage] = useState(1);
  const [postsPerPage] = useState(6);
  const [query, setQuery] = useState(''); // 假设你的搜索关键词存在这个state中

  // 第一步：先过滤全量数据
  const filteredMovies = moviedata.filter(movie => 
    movie.title.toLocaleLowerCase().includes(query.toLocaleLowerCase())
  );

  // 第二步：基于过滤后的结果计算分页参数
  const indexOfLastPost = currentPage * postsPerPage;
  const indexOfFirstPost = indexOfLastPost - postsPerPage;
  const currentPosts = filteredMovies.slice(indexOfFirstPost, indexOfLastPost);
  const howManyPages = Math.ceil(filteredMovies.length / postsPerPage);

  // 第三步：搜索关键词变化时重置当前页到第1页
  useEffect(() => {
    setCurrentPage(1);
  }, [query]);

  return (
    <div className='movieslist'>
      <div className='list'>
        {currentPosts.map((fd, i) => (
          <Card
            img={fd.img}
            title={fd.title}
            quality={fd.quality}
            rating={fd.rating}
            price={fd.price}
            duration={fd.duration}
            year={fd.year}
            id={fd.id}
            allproduct={fd}
            allwishlist={fd}
            key={i}
          />
        ))}
      </div>
      <Pagination pages={howManyPages} setCurrentPage={setCurrentPage} />
    </div>
  );
};

export default MovieList;

关键说明 #

• 过滤逻辑从currentPosts的渲染环节前移到全量数据上，确保搜索覆盖所有商品
• 所有分页计算（总页数、当前页切片）都基于过滤后的结果集，保证分页是针对搜索结果的
• 新增useEffect监听搜索关键词变化，自动重置页码，避免用户在非第一页搜索后出现空列表的异常情况

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