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 将 return 一个函数。如果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 在反应中去抖动

Lodash debounce in react

javascript

lodash

reactjs