Дроссель не работает при вызове метода класса из-за дроссельной функции - PullRequest
Новая
       19

Дроссель не работает при вызове метода класса из-за дроссельной функции

0 голосов
/ 16 октября 2019

У меня есть этот код, который регулирует ввод текста, но я также хочу, чтобы он ограничивал вызов метода, который, по-видимому, мешает работе текста. 

import { throttle } from 'lodash';
...
      <input
        type="text"
        onChange={(e): void => throttledTextInput(e.target.value)}
        style={{ outline: 'none' }}
      />
...
  const throttledTextInput = throttle((text) => handleThrottledText(text), 1000);
...
  const handleThrottledText = (text: string): void => {
    console.log(text); // without the below two lines it works fine
    const textInputMessage: Array<Action> = [];
    // but when calling the below, the throttling stops working and it 
  };

Есть идеи, почему? Как я могу решить проблему? Заранее спасибо!

1 Ответ

1 голос
/ 16 октября 2019

Я предполагаю, что это функциональный компонент, так что throttledTextInput создается каждый раз, когда вы повторно визуализируете компонент, нарушая его поведение. Я предполагаю, что messagingController.dispatchActions вызывает повторную визуализацию вашего компонента. 

const throttledTextInput = useRef(throttle(handleThrottledText, 1000));

const handleThrottledText = (text: string): void => {
  console.log(text);
};

useRef создаст удушенную функцию только один раз, вы можете использовать тот же шаблон для удаления и т. Д.

Назовите это так: throttledTextInput.current('calling throttled func with this text').

Если у вашей удушенной функции есть зависимости , их нужно будет объявить так, чтобы функция была заново создана, если они изменятся. Но будьте осторожны, если сам дросселированный обратный вызов изменит зависимости, которые он сломает, так как функция будет продолжать создаваться заново. Для этого useCallback является более подходящим крючком: 

const throttledTextInput = useCallback(
  throttle(text => {
    console.log('called throttle with', text, props.dispatchMessages);
  }, 1000),
  [props.dispatchMessages]
);

В отличие от useRef вы вызываете его просто с помощью throttledTextInput('some text').

...