Как я могу реализовать debounce в компоненте реагирования без использования конструктора? - PullRequest
Новая
       75

Как я могу реализовать debounce в компоненте реагирования без использования конструктора?

0 голосов
/ 05 сентября 2018

Моя текущая реализация основана на ответах на аналогичные вопросы о том, как отлаживать в React, но когда я использую debounce так, как они рекомендуют, функция debounce заканчивается вызовом несколько раз для каждого нажатия клавиши в строке поиска. . 

import { throttle, debounce } from 'throttle-debounce'

// 1.
public handleSearch = async e => {
  e.preventDefault()
  // value from onChange
  const {
    target: { value: input }
  } = e
  const { category, query, startSearch } = this.props

  query(input)
  // data sent to action creator
  const data = {
    input,
    tags: input.replace(/\s/g, '').split(','),
    category: category
  }

  this.startSearchDebounce(data)
}

// 3. is debounced for 5 seconds, but then makes calls for every keystroke
public handleCall = async data => this.props.startSearch(data)

// 2. should debounce action creator in handleCall for 5 seconds
public startSearchDebounce = debounce(5000, this.handleCall)

А вот элемент input, который вызывает функцию handleSearch в своем onChange: 

        <input
          type="text"
          className="input spawnSearch"
          placeholder="Search"
          onChange={this.handleSearch}
          value={input}
          ref={this.inputRef}
        />

И, наконец, создатель экшена, от которого я пытаюсь отказаться. Именно здесь осуществляется вызов API. 

export const startSearch = data => {
  return async (dispatch, getState) => {
    const conditions = {
      ...data,
      id: getState().auth.id
    }

   // send api call here
   const imageResultsByTag = await api.image.getAllByTags(conditions)

   // then dispatch image results to store
   return dispatch(search(imageResultsByTag))
 }
}

То, что происходит в настоящее время, заключается в том, что каждое нажатие клавиши отлаживается в течение 5 секунд, а затем через 5 секунд сервер загружается вызовами API. Я думаю, что причина, по которой он не срабатывает только один раз, заключается в том, что когда startSearchDebounce вызывается в функции handleSearch при каждом нажатии клавиши, он по какой-то причине создает новую функцию debounce. Я не знаю, почему это происходит, так как startSearchDebounce определен для экземпляра класса. Что я тут не так делаю?

...