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

当用户在输入字段中键入内容时，我试图消除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);
  };

错误：

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

---

当用户在输入字段中键入内容时，如何对

500ms

的

setSerachQuery（）

进行去抖动？

您需要将回调传递给：

传递内联回调和依赖项数组

useCallback

将返回一个回拨的备忘录版本，该版本仅在其中一个依赖项发生更改时才会更改

请尝试以下操作：

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

---

我希望这有帮助

您案例中的问题是，您没有将函数传递给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);
  };

---

这给了我lint error

React Hook useCallback接收到一个依赖项未知的函数。改为传递一个内联函数。eslint/deps

您可以将setSearchQuery作为依赖项传递给useCallback，但由于函数没有更改，因此也可以禁用eslint警告。检查