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

Question

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

    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' ))

Answer 1

我认为，这是因为您直接在 searchHandler 函数中改变状态。你可以试试这个吗？

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

Answer 2

我认为，当搜索关键字的长度为 0 时，您需要更改 searchHandler 方法并清除 filtered 参数。

searchHandler(event){
    const keyword = event.target.value
    const filtered = !keyword.length ? [] : this.state.allData.filter((item) => (item.companyName.indexOf(keyword) > -1))
    this.setState({ filtered })
}

Answer 3

问题是当你清空搜索框时，关键字变成了“”。然后检查 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
    })
  }