Lodash 去抖动触发每次更改

Question

我正在尝试消除从 React 中的输入更改发送 Redux 操作的抖动。

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), []);