React搭配Material UI实现搜索后标题结果分页的问题咨询

解决方案 #

核心问题是你现有分页逻辑的计算基准是全量原始数据，过滤后没有同步把分页的数据源切换为过滤后的结果，导致分页逻辑和过滤结果脱节。
按以下步骤修改即可：

• 第一步：将分页计算的数据源改为动态适配搜索状态
  你原本计算当前页数据、总页数时都基于全量的todos列表，修改为当存在搜索关键词时，使用过滤后的filteredData作为计算基准，否则用全量数据：

// 动态确定当前分页的数据源
const activeDataSource = searchValue ? filteredData : originalTodos;
// 计算当前页要渲染的任务
const currentTasks = activeDataSource.slice(
  (currentPage - 1) * pageSize,
  currentPage * pageSize
);
// 同步更新分页组件的总页数
const totalPage = Math.ceil(activeDataSource.length / pageSize);

• 第二步：搜索触发时重置页码为1
  避免过滤后总页数变小，当前页码超过最大总页数导致渲染空内容：

const handleSearchInputChange = (e) => {
  const keyword = e.target.value.trim();
  // 原有过滤逻辑保留
  setFilteredData(originalTodos.filter(item => item.title.includes(keyword)));
  // 新增：每次搜索都回到第一页
  setCurrentPage(1);
};

• 第三步：统一组件调用
  不需要再维护两个Tasks组件的分支，直接用动态计算的currentTasks即可，同时支持正常分页和搜索后分页：

<Tasks tasks={currentTasks} loading={loading} />

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