将 Lodash debounce 与 React useCallback 用于输入 onChange 事件

Question

onChange当用户在输入字段中键入内容时，我试图消除事件的反跳。

我正在引用这些线程：

• 我怎样才能执行去抖操作？
• 使用去抖 onChange 处理程序设置输入值

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

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);
  };