React项目分页正常但搜索功能异常求助（附代码）

咱们先来拆解你遇到的两个核心问题：

1. 原始搜索删除字符后失效的根本原因 #

你最初的filterList方法直接对this.state.issues进行过滤，但每次过滤后，state.issues就变成了过滤后的子集。比如你输入"test"筛选出相关条目后，state.issues就只剩这些条目了；当你删除"test"时，你是在这个子集里再次过滤，自然无法恢复到原始的完整数据集——因为子集里根本没有其他数据。

2. 调用loadData()后跳回第一页的原因 #

你修改后调用loadData()试图重新获取完整数据，但fetch是异步操作：你调用loadData()后立刻去过滤this.state.issues，此时state还没被更新（请求还没完成），等请求完成后state.issues被重置为完整数据，但此时过滤逻辑已经执行完毕；同时分页组件会因为items突然变回完整数据集，自动计算并跳回第一页，这就导致了页码跳转的问题。

具体修复方案 #

核心思路是保存一份原始的完整数据集，每次搜索都基于这份原始数据过滤，而不是已过滤的子集。同时合理处理分页和搜索的联动。

步骤1：修改State结构 #

在constructor里新增两个状态：originalIssues（保存从服务器获取的完整数据）和filteredIssues（保存过滤后的数据，用于分页和展示）：

constructor(props) {
  super(props);
  this.state = {
    originalIssues: [], // 原始完整数据集
    filteredIssues: [], // 过滤后的数据
    pageOfItems: [],
  };
  this.createIssue = this.createIssue.bind(this);
  this.onChangePage = this.onChangePage.bind(this);
  this.filterList = this.filterList.bind(this);
}

步骤2：更新loadData方法 #

获取数据后，同时把完整数据存入originalIssues和filteredIssues：

loadData() {
  fetch('/api/issues')
    .then(response => {
      if (response.ok) {
        response.json().then(data => {
          data.records.forEach(issue => {
            issue.created = new Date(issue.created);
            if (issue.completionDate) {
              issue.completionDate = new Date(issue.completionDate);
            }
          });
          this.setState({ 
            originalIssues: data.records,
            filteredIssues: data.records // 初始状态下过滤后数据等于原始数据
          });
        });
      } else {
        response.json().then(error => {
          alert(`Failed to fetch issues ${error.message}`);
        });
      }
    }).catch(err => {
      alert(`Error in fetching data from server: ${err}`);
    });
}

步骤3：重构filterList方法 #

基于originalIssues进行过滤，更新filteredIssues，同时搜索完成后自动回到第一页（这是符合用户习惯的交互逻辑）：

filterList = (e) => {
  const searchTerm = e.target.value.toLowerCase();
  // 基于原始完整数据过滤，确保删除字符后能恢复全部内容
  const updatedList = this.state.originalIssues.filter((item) => {
    // 用includes替代search，代码更直观易懂
    return item.title.toLowerCase().includes(searchTerm);
  });
  
  this.setState({ filteredIssues: updatedList }, () => {
    // 过滤完成后，手动触发第一页的展示（根据你的分页每页数量调整slice的第二个参数）
    const pageSize = 10; // 假设你的分页每页显示10条，可根据实际情况修改
    this.onChangePage(this.state.filteredIssues.slice(0, pageSize));
  });
}

步骤4：更新分页组件的数据源 #

把Pagination组件的items属性从this.state.issues改为this.state.filteredIssues：

<Pagination items={this.state.filteredIssues} onChangePage={this.onChangePage} />

额外说明 #

• 这样修改后，无论你输入还是删除搜索字符，都是基于原始完整数据进行过滤，再也不会出现删除字符后无法恢复数据的问题。
• 搜索后回到第一页是合理的交互体验：用户搜索新内容时，通常希望从第一页开始浏览结果。如果你有特殊需求要保持当前页码，可以在过滤时计算当前页码对应的新数据，但这种场景比较少见。

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