确保在过滤方法之前初始化数据答案

【问题标题】：Ensure that data is initialized before filtering method确保在过滤方法之前初始化数据
【发布时间】：2021-09-14 19:22:00
【问题描述】：

尝试根据这个答案对数据表进行过滤：Data Table filtering using react-data-table-component

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

如果我使用 data={this.filteredItems}，它将显示未定义，但一旦我过滤，数据将开始显示
如果我使用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

【解决方案1】：

这样您就可以有条件地提供数据

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

【讨论】：

【解决方案2】：

根据您的用例，要么显示加载器，要么在获取时简单地传递一个空数组，即

if (!this.filteredItems) {
  // placeholder component - use your own
  return <LoaderComponent />
}

或

data={this.filteredItems || []}

话虽如此，总体而言，这似乎是一种不好的方法，而且您从链接线程中复制的答案的代码质量非常差（即不必要的类属性声明等）。

【讨论】：