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