时间戳

首页 > 解决方案 > 确保在过滤方法之前初始化数据

reactjs - 确保在过滤方法之前初始化数据

问题描述

尝试根据此答案对数据表进行过滤：使用 react-data-table-component 进行数据表过滤

筛选成功。但是在过滤之前，this.filteredItems 是没有定义的。

  1. 如果我使用 data= {this.filteredItems}，它将显示 undefined 但一旦我过滤，数据将开始显示
  2. 如果我使用data={result}，它将显示所有结果但不允许我过滤

class Table extends React.Component {
  ... ommitted irrelevant codes

  render() {
    const result = this.props;
    const getSubHeaderComponent = () => (
      <FilterComponent                             
        onFilter={(e) => {
          const newFilterText = e.target.value;
          this.filteredItems = result.filter(        //Filtering works with this.filteredItems
            item => item.name
                && item.name.toLowerCase().includes(newFilterText.toLowerCase())
          );
          this.setState({ filterText: newFilterText });
        }}
        onClear={this.handleClear}
        filterText={this.state.filterText}
      />
    );

    return (
      <React.Fragment>
        <DataTable
          columns={columns}
          data={this.filteredItems}   // Only if i filter, then data will appear. Else it will be undefined because the original data is from result
          subHeader
          subHeaderComponent={getSubHeaderComponent()}
        />
      </React.Fragment>
    );
  }
}

标签： reactjs

解决方案

所以你可以有条件地提供数据

       <DataTable
          columns={columns}
          data={this.filteredItems ? this.filteredItems : result}
          subHeader
          subHeaderComponent={getSubHeaderComponent()}
        />

推荐阅读