Блог

Я извлекаю записи с сервера через API, API был встроен в Loopback. На самом деле на каждой странице я показываю 5 записей, в настоящее время все работает нормально, я могу перемещаться next или 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)}amp;amp;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
    })
  }
  

Я думаю, вам нужно изменить свой searchHandler метод и просто очистить filtered параметр, когда длина ключевого слова для поиска равна 0.

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