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

Posted 2023-02-21

【中文标题】使用 Lodash debounce 和 React useCallback 输入 onChange 事件

【英文标题】：Using Lodash debounce with React useCallback for input onChange event

【发布时间】：2020-09-05 05:45:06

【问题描述】：

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

我引用了这些线程：

Perform debounce in React.js

Set input value with a debounced onChange handler

我有以下 sn-p，我尝试复制上述线程中提供的解决方案：

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

错误：

未捕获的 TypeError：处理程序不是函数

当用户在输入字段中输入时，我如何为500ms 去抖动setSerachQuery()？

【参考方案1】：

您的问题是，您不是将函数传递给 debounce，而是直接调用它。您可以在 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);
  ;

【讨论】：

这给了我皮棉错误React Hook useCallback received a function whose dependencies are unknown. Pass an inline function instead.eslintreact-hooks/exhaustive-deps

您可以将 setSearchQuery 作为依赖项传递给 useCallback，但由于该功能不会改变，您也可以禁用 eslint 警告。检查this post for more details