对输入onChange事件使用Lodash debounce和React useCallback

Question

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

我引用这些线程：

在React.js中执行去盎司

使用取消公告的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);
  };

错误：

错误：处理程序不是一个函数

当用户在输入字段中键入时，如何对500ms的setSerachQuery（）进行去抖动？

Answer 1

您案例中的问题是，您没有将函数传递给debounce，而是直接调用它。你可以使用箭头函数在去盎司像

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