搜索不过滤数据

Question

我有以下代码从列表中搜索数据。我使用了以下代码，但它不过滤记录。这是codepen [链接][1]。

Answer 1

您需要两个数组来进行搜索，第一个保存原始数据，第二个保存过滤后的数据。

constructor(props) {
  super(props);
  this.state = {
    page: 2,
    itemsPerPage: 10,
    data: cardData.data.Table,
    filteredData: cardData.data.Table
  };
  this.items = createItems(100);
}

搜索过滤功能

onSearchTextChange = searchText => {
  const newData = this.state.data.filter(
    item =>
      typeof item.first_name === "string" &&
      item.first_name.toLowerCase().includes(searchText.toLowerCase())
  );

  this.setState({
    filteredData: newData
  });
};

显示来自filteredData的值

<List divided>
  {this.state.filteredData.map(results => (
    <div className="col-sm-3">
      <div className="card our-team" id="employeeInfo">
        <div className="card-body">
          <img
            class="pic"
            src={`data:image/jpeg;base64,${results.Photo}`}
            onerror="this.style.display='none'"
          />
          <h3 className="title">{results.first_name}</h3>
          <div className="row">
            <div className="col-md-3 col-sm-6">
              {" "}
              {results.Department}
            </div>
          </div>
          {/* row for Location cubicle Prof  */}

          <Link
            to={{ pathname: `/cards/${results.id}`, state: results }}
            className={`card-wrapper restore-${results.id}`}
          >
            View Detail
          </Link>
        </div>
      </div>
    </div>
  ))}
</List>