javascript - Lodash debounce 触发每一个变化

Question

我正在尝试通过 React 中的输入更改来消除发送 Redux Action 的抖动。

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

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

这会延迟发送 Action ，但仍会为每次按键发送一个 Action 。我想在输入完成后稍等片刻，然后再发送一次操作。

我在这里做错了什么？

Answer 1

我相信这里发生的情况是每次按键都会导致重新渲染，并且在每次渲染期间它都会创建一个新的 debouncedSubmit 函数，并且每个函数都会触发。尝试使用 React 的 useCallback 方法来内存函数，这样它就不会在重新渲染时重新创建:

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