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

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

我认为，这是因为您直接在searchHandler函数中对状态进行了变异。你可以试试吗？

{
    "exception": "moodle_exception",
    "errorcode": "forcepasswordchangenotice",
    "message": "error/forcepasswordchangenotice"
}

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

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

3 个答案: