React：搜索过滤器无法正常工作

我通过 API 从服务器获取记录，API 是在 Loopback 中构建的。实际上，我在每个页面上显示 5 条记录，目前工作正常，我可以导航next or prev通过分页按钮，每页显示 5 条记录。问题是，当用户在搜索框中键入内容时，记录会正确获取，但是当用户从搜索框中删除查询时，它会破坏应用程序流程。我的意思是说它显示的所有数据不像 5 。我希望当用户搜索某些内容并从搜索框中删除文本时，它可能不会破坏应用程序流程，它必须在执行查询搜索后显示 5 条记录。我将提供代码，请查看并帮助我找出我是否犯了一些错误。我是 React 初学者，没有太多知识来解决这个问题。谢谢Code

    class Example extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      Item: 5,
      skip: 0
    }

    this.handleClick = this.handleClick.bind(this);
  }

  urlParams() {
    return `http://localhost:3001/meetups?filter[limit]=${(this.state.Item)}&&filter[skip]=${this.state.skip}`
  }

  handleClick() {
    this.setState({skip: this.state.skip + 1})
  }

  render() {
    return (
      <div>
        <a href={this.urlParams()}>Example link</a>
        <pre>{this.urlParams()}</pre>
        <button onClick={this.handleClick}>Change link</button>
      </div>
    )
  }
}


ReactDOM.render(<Example/>, document.querySelector('div#my-example' ))

问题是当你清空搜索框时，关键字变成“”。然后你检查str.indexOf("")返回 0 这意味着您的过滤操作返回所有项目（就像您所看到的）！！！

当关键字为“”时，这将返回所有内容：

 let filtered=this.state.allData.filter((item)=>{
      return item.companyName.indexOf(keyword) > -1
    });

要修复它 - 如果关键字为空（“”），只需返回 []

searchHandler(event){
    let keyword =event.target.value;
    let filtered=this.state.allData.filter((item)=>{
      return item.companyName.indexOf(keyword) > -1
    });
    if (keyword === "") {
      filtered = [];
    }
    this.setState({
      filtered
    })
  }