React中Antd Table自定义过滤：如何使用valuations返回的数组

我来帮你搞定这个问题！你现在的核心困扰是格式化后的valArray只能在get valuations()里用，没法拿到外部做过滤逻辑，其实是因为getter是计算属性，每次访问都会重新生成新数组，而且没有持久化存储，所以存state没成功大概率是时机不对。

咱们一步步来改：

第一步：把格式化逻辑抽成可复用的方法 #

先把原来的getter改成普通方法，这样不管是初始化还是过滤时都能调用：

// 抽成单独的格式化方法，复用性更强
formatValuations = () => {
  const { valuation } = this.props;
  // 用map替代for循环，代码更简洁
  return valuation.map(item => ({
    date: item.registered_date,
    name: item.full_name,
    year: item.year
  }));
};

第二步：用state持久化存储格式化后的数据 #

在组件的state里新增三个状态：存格式化后的原始数据、过滤后的结果，还有过滤关键词：

state = {
  originalValuations: [], // 存格式化后的原始数据，避免重复计算
  filteredValuations: [], // 存过滤后的结果，给Table用
  filterText: '' // 过滤输入框的关键词
};

然后在组件挂载和props更新时，更新原始数据的state：

componentDidMount() {
  // 组件挂载时初始化数据
  const formatted = this.formatValuations();
  this.setState({
    originalValuations: formatted,
    filteredValuations: formatted
  });
}

componentDidUpdate(prevProps) {
  // 当props里的valuation变化时，重新格式化并更新state
  if (prevProps.valuation !== this.props.valuation) {
    const formatted = this.formatValuations();
    this.setState({
      originalValuations: formatted,
      filteredValuations: formatted
    });
  }
}

第三步：实现过滤逻辑 #

写一个处理过滤输入的方法，根据输入的关键词对原始数据进行过滤：

handleFilterChange = (e) => {
  const filterText = e.target.value.trim().toLowerCase();
  const { originalValuations } = this.state;
  
  // 根据关键词过滤，这里可以根据你的需求调整过滤规则
  const filtered = originalValuations.filter(item => 
    item.name.toLowerCase().includes(filterText) ||
    item.date.includes(filterText) ||
    item.year.toString().includes(filterText)
  );
  
  this.setState({ filterText, filteredValuations: filtered });
};

第四步：更新render部分，添加过滤输入框和绑定数据 #

最后在render里加上过滤输入框，Table的dataSource改用state里的filteredValuations：

render() {
  const columns = [
    { title: "Date", dataIndex: "date" },
    { title: "Name", dataIndex: "name" },
    { title: "Year", dataIndex: "year" }
  ];

  return (
    <div style={{ padding: '16px' }}>
      {/* 过滤输入框 */}
      <input
        type="text"
        placeholder="输入关键词过滤..."
        value={this.state.filterText}
        onChange={this.handleFilterChange}
        style={{ marginBottom: '16px', padding: '8px', width: '200px' }}
      />
      {/* Table用过滤后的数据源 */}
      <Table columns={columns} dataSource={this.state.filteredValuations} rowKey="date" />
    </div>
  );
}

为什么原来的getter不行？ #

原来的get valuations()是计算属性，每次访问this.valuations都会重新执行一遍循环生成新数组，不仅性能有损耗，而且这个数组没有被持久化存储，你没法在外部拿到同一个引用去做过滤修改。把数据存在state里后，我们就能完全控制数据的流转，过滤逻辑也能基于稳定的原始数据来处理。

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