react-js-pagination筛选后分页异常：点击页码返回未筛选数据求助

我帮你排查了代码里的核心问题，主要是分页切换时没带上筛选条件，还有几处小错误，咱们一步步来修复：

1. 分页切换时未携带筛选条件 #

你当前的handlePageChange函数里，调用getTableListData只传了页码和每页条数，完全没用到当前选中的国家筛选值，所以切换页码时接口请求的是全部原始数据，自然就回到未筛选状态了。

修改handlePageChange函数，把当前的selectCountry也传给接口：

handlePageChange = pageNumber => {
  let pNum = pageNumber || 1;
  this.setState({ activePage: pNum });
  // 带上当前的筛选条件：selectCountry
  getTableListData(pNum, this.state.pageSize, "", this.state.selectCountry)
    .then(response => this.getTableData(response));
};

2. 筛选函数里的拼写错误+页码重置 #

在handleCountryChange里，你写了this.getTableData(countryWiseSchool)，但countryWiseSchool根本没定义，应该是response，这会导致筛选后数据无法正确更新。同时，筛选时应该把页码重置为1，避免出现页码超出筛选后数据总页数的异常情况：

修改handleCountryChange函数：

handleCountryChange = val => {
  // 筛选时强制重置页码到第一页
  this.setState({ 
    selectCountry: val,
    activePage: 1 
  }, () => {
    // 用setState的回调确保状态更新后再请求接口
    let searchSchool = "";
    getTableListData(this.state.activePage, this.state.pageSize, searchSchool, val)
      .then(response => {
        this.getTableData(response); // 修复未定义变量的问题
      });
  });
};

这里用setState的回调是因为它是异步操作，回调里才能确保拿到最新的activePage和selectCountry值，避免请求参数错误。

3. 空筛选条件的逻辑优化 #

原来的else分支可以合并到统一逻辑里，让代码更简洁：

handleCountryChange = val => {
  this.setState({ 
    selectCountry: val,
    activePage: 1 
  }, () => {
    let searchSchool = "";
    // 无论筛选条件是否为空，统一调用接口
    getTableListData(this.state.activePage, this.state.pageSize, searchSchool, val || "")
      .then(response => {
        this.getTableData(response);
      });
  });
};

4. 确认分页组件的总条数更新 #

你的getTableData函数已经在更新total状态，这部分是正确的——只要接口返回的Total是筛选后的总条数，分页组件就能根据total和pageSize自动计算总页数，显示正常的分页按钮。

最终关键代码片段 #

handlePageChange = pageNumber => {
  let pNum = pageNumber || 1;
  this.setState({ activePage: pNum });
  getTableListData(pNum, this.state.pageSize, "", this.state.selectCountry)
    .then(response => this.getTableData(response));
};

handleCountryChange = val => {
  this.setState({ 
    selectCountry: val,
    activePage: 1 
  }, () => {
    let searchSchool = "";
    getTableListData(this.state.activePage, this.state.pageSize, searchSchool, val)
      .then(response => {
        this.getTableData(response);
      });
  });
};

这样修改后，筛选完再切换页码，接口会带上当前的国家筛选条件，返回的就是对应筛选后的分页数据，不会再回到原始数据了。

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