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

IT技术 javascript reactjs react-native ecmascript-6 es6-promise
2021-05-06 04:40:50

我正在通过 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' ))
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
    })
  }

我认为，当搜索关键字的长度为 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 })
}

我认为，这是因为您直接在 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
    })
  }
其它你可能感兴趣的问题
上一篇React - Internet Explorer 11 输入在第一次 onchange 后失去焦点 下一篇Ajax 删除请求中传递给成功函数的是什么？