Lodash在反应中去抖动答案

【问题标题】：Lodash debounce in reactLodash在反应中去抖动
【发布时间】：2021-06-23 09:19:21
【问题描述】：

我是 lodash 的新手，我正在尝试如下使用它：

import _ from "lodash"
import SearchBar from "../components/UI/SearchBar"

const FaQSearchBar = () => {
  const handleOnChange = (e) => {
    console.log("pre-lodash")
    _.debounce(() => console.log("yo", e), 300)
  }

  return (
    <SearchBar
      initialWidth="204px"
      onFocusWidth="408px"
      onChange={handleOnChange}
    />
  )
}
export default FaQSearchBar

lodash 之前的日志会弹出，但 lodash 本身没有任何内容。如果我将语法更改为：_.debounce(console.log("yo", e), 300)

我有以下错误Uncaught TypeError: Expected a function

我想我在这里遗漏了一个 lodash 原则。谢谢

【问题讨论】：

您创建了一个去抖函数，但从不调用它。您可能想要做的是在 useMemo 中创建您的 debounce 函数，

标签： javascript reactjs lodash

【解决方案1】：

因为您以错误的方式使用debounce。 Debounce 将返回一个函数。如果handleOnChange 不让组件重新渲染，你可以使用：

  const functionDebounce = _.debounce(() => console.log("yo", e), 300);
  const handleOnChange = (e) => {
    console.log("pre-lodash");
    functionDebounce(e);
  };

但实际上，我们会做一些事情，组件会重新渲染。所以我们需要将functionDebounce 包裹到useCallback 中，以确保在组件重新渲染时它不会改变

const functionDebounce = useCallback(
    _.debounce(() => console.log("yo", e), 300),
    []
  );

【讨论】：