React使用react-data-table-component过滤前filteredItems未定义问题咨询

架构老林

2026-10-4

问题根因

this.filteredItems仅在过滤事件触发时才会被赋值，首次渲染阶段没有初始化，同时直接用类实例属性存储渲染所需数据不符合React的状态管理逻辑，才会出现两种配置都不符合预期的情况。

修正方案

直接在render阶段通过props和state计算需要渲染的数据，无需额外用实例属性存储过滤结果，代码修改如下：

class Table extends React.Component {
  // 初始化state，过滤文本默认值为空
  constructor(props) {
    super(props);
    this.state = {
      filterText: ''
    };
    this.handleClear = this.handleClear.bind(this);
  }

  handleClear() {
    this.setState({ filterText: '' });
  }

  render() {
    // 注意：如果你的props本身就是列表数组，直接写 const result = this.props 即可
    const result = this.props;
    // 实时计算当前要展示的列表：过滤文本为空返回全部数据，不为空返回过滤后的数据
    const filteredItems = this.state.filterText
      ? result.filter(item =>
          item.name && item.name.toLowerCase().includes(this.state.filterText.toLowerCase())
        )
      : result;

    const getSubHeaderComponent = () => (
      <FilterComponent
        onFilter={(e) => {
          this.setState({ filterText: e.target.value });
        }}
        onClear={this.handleClear}
        filterText={this.state.filterText}
      />
    );

    return (
      <React.Fragment>
        <DataTable
          columns={columns}
          data={filteredItems}
          subHeader
          subHeaderComponent={getSubHeaderComponent()}
        />
      </React.Fragment>
    );
  }
}