使用 Lodash 去反弹与 React 使用回调输入 onChange 事件

Question

当用户在输入字段中键入时，我正在尝试取消 onChange 事件。

我引用了这些线程：

在 React 中执行去抖动.js

使用去抖动更改处理程序设置输入值

我有以下代码片段，我尝试复制上述线程中提供的解决方案：

const handler = useCallback(debounce(setSearchQuery(value), 500), []);
useEffect(() => {
document.addEventListener('keydown', handleDocumentKeyDown);
handler(value);
return () => document.removeEventListener('keydown', handleDocumentKeyDown);
}, [isOpen, handleDocumentKeyDown, handler, value]);
...
const handleChange = (event) => {
setValue(event.target.value);
};

错误：

未捕获的类型错误：处理程序不是函数

当用户在输入字段中键入内容时，如何取消setSerachQuery()500ms的抖动？

Answer 1

在你的例子中，问题在于你不是传递一个函数来去反弹，而是直接调用它。您可以在去抖动中使用箭头功能，例如

const handler = useCallback(debounce(() => setSearchQuery(value), 500), []);

完整代码

const handler = useCallback(debounce(() => setSearchQuery(value), 500), []); // arrow function here
useEffect(() => {
document.addEventListener('keydown', handleDocumentKeyDown);
handler(value);
return () => document.removeEventListener('keydown', handleDocumentKeyDown);
}, [isOpen, handleDocumentKeyDown, handler, value]);
...
const handleChange = (event) => {
setValue(event.target.value);
};

Answer 2

一点也不漂亮，但我设法做到没有依赖问题的唯一方法是：

const debouncer = useRef(debounce((over: Over | null) => {
console.log(over);
}, 100));
const onOver = useCallback((over: Over | null) => {
debouncer.current(over);
}, [debouncer]);