React表格搜索与分页冲突问题：搜索结果分页未同步

核心问题是你当前的分页逻辑仍基于原始全量数据计算，搜索后需切换为以过滤后的结果数据为基准处理分页参数（总页数、当前页展示数据），具体实现步骤如下：

1. 调整状态管理 #

确保维护以下关键状态：

import { useState, useEffect } from 'react';

// 可根据实际业务调整状态字段
const [originalData, setOriginalData] = useState([]); // 接口返回的全量原始数据
const [searchKeyword, setSearchKeyword] = useState('');
const [filteredData, setFilteredData] = useState([]); // 搜索过滤后的结果集
const [currentPage, setCurrentPage] = useState(1);
const pageSize = 20; // 每页固定展示20条

2. 实时生成过滤结果 #

每次搜索关键词变化或原始数据更新时，重新过滤数据并重置当前页到第一页（避免停在无数据的页码）：

useEffect(() => {
  // 搜索触发时强制回到第一页，防止当前页超过结果总页数
  setCurrentPage(1);
  
  // 自定义过滤逻辑：示例为匹配所有字段，可根据业务需求指定目标字段
  const filtered = originalData.filter(item => {
    // 统一转为小写并转字符串，提升搜索兼容性
    return Object.values(item).some(val => 
      String(val).toLowerCase().includes(searchKeyword.toLowerCase())
    );
  });
  
  setFilteredData(filtered);
}, [searchKeyword, originalData]);

3. 基于过滤结果渲染当前页数据 #

不再从原始数据截取，改用过滤后的结果集：

// 计算当前页的起始/结束索引
const startIdx = (currentPage - 1) * pageSize;
const endIdx = startIdx + pageSize;
// 当前页要渲染的表格数据
const tableData = filteredData.slice(startIdx, endIdx);

4. 根据过滤结果更新分页总数 #

总页数需基于过滤后的数据长度计算，而非原始数据：

// 向上取整计算总页数
const totalPages = Math.ceil(filteredData.length / pageSize);

5. 修正分页导航逻辑 #

分页切换时需判断目标页码是否在有效范围内（1到totalPages之间）：

const handlePageChange = (newPage) => {
  if (newPage >= 1 && newPage <= totalPages) {
    setCurrentPage(newPage);
  }
};

额外注意事项 #

• 如果数据是后端分页返回的（非前端全量加载），需将搜索关键词+当前页码一起传给后端，后端返回对应页码的搜索结果和总条数，前端直接用接口返回的总条数计算总页数即可。
• 过滤逻辑需贴合业务：比如仅需匹配用户名、ID等特定字段，直接写item.username.includes(...)即可，无需遍历所有字段，提升性能。

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