Lodash退出反应

Question

我是新来的房客，我试着用在以下几个方面：

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

预房客日志弹出，但没有从房客本身。如果我更改如下内容的语法：_.debounce(console.log("yo", e), 300)

我有以下错误--未知的TypeError:期望一个函数

我想我错过了一个房客原则。谢谢

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