Lodash 在反应中去抖动

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