Реагируйте: Фильтр поиска не работает должным образом - PullRequest
Новая
       18

Реагируйте: Фильтр поиска не работает должным образом

2 голосов
/ 14 марта 2019

Я получаю записи с сервера через 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)}&&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()}
Изменить ссылку )}} ReactDOM.render (, document.querySelector ('div # my-example'))

Ответы [ 3 ]

2 голосов
/ 14 марта 2019

Я думаю, вам нужно изменить метод 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 })
}
1 голос
/ 14 марта 2019

Проблема в том, что когда вы очищаете окно поиска, ключевое слово становится "".Затем вы проверяете str.indexOf("") возвращает 0, что означает, что ваша операция фильтрации возвращает все элементы (как вы видите) !!!

Это возвращает все, когда ключевое слово "": 

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

Toисправить это - просто вернуть [], если ключевое слово пустое ("") 

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
    })
  }
1 голос
/ 14 марта 2019

Я думаю, это потому, что вы изменяете состояние непосредственно в функции 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
    })
  }
...