Question

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

我正在引用这些线程：

Set input value with a debounced onChange handler

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

  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：处理程序不是函数

当用户在输入字段中键入内容时，如何为setSerachQuery()的{{1}}进行反跳？

Answer 1

您需要将回调传递给useCallback：

传递内联回调和一系列依赖项。 useCallback将返回一个已记忆的回调版本，仅在其中一个依赖项已更改时才会更改。

尝试以下操作：

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

我希望这会有所帮助！

Answer 2

您遇到的问题是，您没有直接传递函数来去抖动，而是直接调用它。您可以在反跳中使用箭头功能，例如

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

将Lodash反跳与React useCallback一起用于输入onChange事件

2 个答案: