Question

我在React上写了一个livesearch函数。如果您开始在搜索字段中键入内容，则项目将重新呈现。如果搜索未找到匹配项，则会显示消息“未找到结果”。这部分工作正常。但是，如果您开始删除搜索输入，则函数会开始匹配值，但是什么也不会发生。清单为空。它本应将项目重新显示回来，但事实并非如此。我不确定如何更改。

const userName = sessionStorage.getItem('login');

 class Chart extends Component {
  constructor(props) {
     super(props);
      this.state = {
         data: props.data,
         pageOfItems: [],
     };
    this.onChangePage = this.onChangePage.bind(this);
   }
   onChangePage(pageOfItems) {
    this.setState({pageOfItems});
   }
   notFound() {
    return <div>Results was not found</div>;
  }

   render() {
    return (<section className="chart">
      <PageTitle titleClass="page-title" titleText="Chart" />
      {!userName ? <div className="login-page">
       <Link to="/login">
       Log In</Link> 
       to See Your Job Chart</div> : 
        this.props.data.length ?
        this.state.pageOfItems.map((item, index) => (
         <Card key={index}
          position={item.position}
          company={item.companyName}
          salary={item.salary}
          vacancyStatus={item.status}
          roadTime={item.roadTime}
          workTime={item.minutes}
         />
       )) : this.notFound()
         }
       {!userName ?
        <div></div> :
         this.props.data ?
          <Pagination
           items={this.props.data}
           onChangePage={this.onChangePage}/> :
           "" }
    </section>);
  }
}

用于搜索处理的功能

  onSearchChange = (event) => {
  const filteredData = this.props.filter.filter(dataItem => {
    return dataItem.position.toLowerCase().includes(event.target.value.toLowerCase())
  });
  this.setData(filteredData);
};

React Live搜索不会重新显示搜索项

0 个答案: