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

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

我认为，您需要更改 searchHandler 方法并在搜索关键字的长度为 0 时清除 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("") returns 0 这意味着你的过滤操作 returns 所有项目（就像你看到的那样）！！！

这 return 关键字为“”时的所有内容：

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

要修复它 - 只需 return [] 如果关键字为空 ("")

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

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

React : Search Filter is not working Properly

javascript

ecmascript-6

reactjs

es6-promise

react-native