Поиск должен запускаться без кнопки ввода или поиска с задержкой в ​​2 секунды. - PullRequest
Новая
       7

Поиск должен запускаться без кнопки ввода или поиска с задержкой в ​​2 секунды.

0 голосов
/ 26 марта 2020

Итак, меня попросили создать страницу ReactJS, где пользователь должен иметь возможность поиска фильмов, сериалов и т. Д. c. из https://omdbapi.com и одним из условий было то, что Search should be triggered without an enter or search button with a delay of 2 seconds. Не удалось найти прямой вопрос, подумал, что я должен опубликовать его для более легкого поиска других.

1 Ответ

0 голосов
/ 26 марта 2020

Итак, код прост: 

var timeout
this.fetchingData = (url) => {
  timeout = setTimeout(
    () => {
      fetch(url)
        .then(response => {
          if (response.status !== 200) {
            return console.error('Not working')
          };
          return response.json()
        })
        .then(data => {
          this.setState({
            Search: data.Search,
            response: data.response,
            totalResults: data.totalResults
          })
        })
        .catch(error => {
          alert(error)
        })
    }, timeToDelay);
};

this.myStopFunction = () => {
  clearTimeout(timeout);
}

}

handlePageChange = (event) => {
  if (this.state.movieName === '') {
    console.error("ENTER MOVIE NAME FIRST")
  } else {
    this.myStopFunction()
    this.handleChange(event)
  }
}
handleChange = (event) => {
  this.myStopFunction()
  const {
    value,
    name
  } = event.target;
  this.setState({
    [name]: value
  }, () => value ? this.myFunction(this.state, this.url, this.fetchingData) : null);
};

внутри return()

<FormInput
  name='page'
  type='number'
  handleChange={this.handlePageChange}
  value={this.state.page}
  label='page number'
  required
/>
...