react-table v6.7.6切换标签重置服务器端过滤器及避免重复请求问题

看来你在使用react-table 6.7.6做服务器端过滤时遇到了两个小麻烦：输入过滤字符时触发两次后端请求，还有切换标签页后过滤器内容没重置。我来帮你一步步解决这些问题：

一、为什么会触发两次后端请求？ #

在manual模式下，react-table会把过滤状态的控制权完全交给你。当你在过滤器输入字符时，onFilteredChange会被触发，你调用setState更新filtered状态，组件重新渲染后，如果你的请求逻辑是在渲染周期或者setState的回调里直接执行，很容易因为状态更新的触发时机问题导致重复请求——比如一次是onFilteredChange触发的请求，另一次是组件重新渲染时又执行了一次请求。

二、如何避免重复请求？ #

最有效的方式是给请求加防抖（debounce），合并短时间内的多次输入操作，只在用户停止输入一段时间后发送一次请求。另外也可以加参数校验，避免相同条件重复请求。

1. 使用防抖函数 #

可以借助lodash的debounce，或者自己实现简单的防抖逻辑：

// 先引入lodash的debounce（如果没装的话先npm i lodash.debounce）
import debounce from 'lodash.debounce';

class YourTableComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      filtered: [],
      // 其他表格状态比如data、page等
    };
    // 定义防抖后的请求函数，延迟300ms（可根据需求调整）
    this.debouncedFetch = debounce(this.fetchServerData, 300);
  }

  // 后端请求逻辑
  fetchServerData = (params) => {
    // 这里写你的后端请求代码，比如axios.get('/api/data', { params })
    console.log('发送请求:', params);
  };

  // 处理过滤变化
  handleFilterChange = (filtered) => {
    this.setState({ filtered }, () => {
      // 用防抖后的函数发送请求
      this.debouncedFetch({ filtered: this.state.filtered });
    });
  };

  // 组件卸载时清除防抖定时器，避免内存泄漏
  componentWillUnmount() {
    this.debouncedFetch.cancel();
  }

  render() {
    return (
      <ReactTable
        manual
        filtered={this.state.filtered}
        onFilteredChange={this.handleFilterChange}
        // 其他必要配置比如columns、data等
      />
    );
  }
}

2. 添加请求参数校验 #

如果不想用防抖，也可以在请求前对比当前过滤条件和上次请求的条件，只有当条件真正变化时才发送请求：

class YourTableComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      filtered: [],
    };
    this.lastFiltered = []; // 存储上次请求的过滤条件
  }

  fetchServerData = (params) => {
    // 对比当前过滤条件和上次是否一致
    if (JSON.stringify(params.filtered) === JSON.stringify(this.lastFiltered)) {
      return; // 条件相同，不发送请求
    }
    this.lastFiltered = params.filtered;
    // 发送后端请求...
  };

  // 其他代码同上
}

三、切换标签页时重置过滤器 #

react-table不会自动处理跨标签页的状态重置，所以需要在标签页切换的回调里手动清空filtered状态，并触发一次不带过滤条件的请求：

假设你用的是类似Ant Design的Tabs组件，处理逻辑如下：

handleTabSwitch = (activeTabKey) => {
  // 先重置过滤器状态
  this.setState({ filtered: [] }, () => {
    // 发送不带过滤条件的请求，刷新表格数据
    this.fetchServerData({ filtered: [] });
  });
  // 其他标签页切换逻辑，比如保存当前选中标签等
};

// 在render里的Tabs组件绑定onChange
<Tabs onChange={this.handleTabSwitch} activeKey={this.state.activeTab}>
  {/* 各个标签页内容 */}
</Tabs>

这样切换标签页后，表格的过滤器会被清空，同时后端请求也会带上空的过滤条件，返回该标签页对应的原始数据。

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