Question

我是 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 原则。谢谢

Answer 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),
    []
  );

Lodash 在反应中去抖动

1 个答案: