Loda sh Дебютирует, увольняя каждое изменение

Question

Я пытаюсь отменить отправку действия Redux из-за изменения ввода в React.

const debouncedSubmit = debounce(() => dispatch(new TaskAnswerSubmit({index: props.index, text: answer})), 1000)

function onChange(e){
    setAnswer(e.target.value)
    debouncedSubmit()
}

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

Что я здесь не так делаю?

Answer 1

Я считаю, что здесь происходит то, что каждое нажатие клавиши вызывает повторный рендеринг, и во время каждого рендеринга он создает новую функцию debouncedSubmit, и каждая из них запускается. Попробуйте использовать метод React useCallback, чтобы запомнить функцию, чтобы она не воссоздалась при повторном рендеринге:

const debouncedSubmit = useCallback(debounce(() => dispatch(new TaskAnswerSubmit({index: props.index, text: answer})), 1000), []);

Answer 2

Я думаю, что вам нужно регулировать.

Это ответ на ранее заданный вопрос о разнице между регулированием и дебаузом Разница между регулированием и дебаузированием функции :

Регулирование задержит выполнение функции. Это уменьшит количество уведомлений о событии, которое запускается несколько раз.

Деблокирование объединит серию последовательных вызовов функции в один вызов этой функции. Это гарантирует, что будет сделано одно уведомление о событии, которое срабатывает несколько раз.