将参数传递给函数回调

Question

我正在尝试在 lodash 中使用 debounce 来延迟 onChange，请参见下面的代码。

import React, { useState, useEffect, useCallback } from "react";
import { TopBar } from "@shopify/polaris";
import { debounce } from "lodash";

function SearchBar() {
  const [searchValue, setSearchValue] = useState("");

  const handleSearchFieldChange = ((value:string) => {
    setSearchValue(value);
  });

  const debounceLoadData = useCallback(debounce({searchValue} => fetchData, 1000), []);

  useEffect(() => {
    debounceLoadData();
    console.log({searchValue})
  }, [searchValue]);

  function fetchData(value:string) {
    console.log("searchValue " + value);
  }

  const searchFieldMarkup = (
    <TopBar.SearchField
      onChange={handleSearchFieldChange}
      value={searchValue}
      placeholder="Search Value"
    />
  );

  return <TopBar searchField={searchFieldMarkup} />;
}

一开始，我想在 fetchData 函数中使用searchValue，但似乎因为作用域的原因，它无法读取它，虽然状态已经更新，但它总是为空。

因此，我尝试从 debounceLoadData 传递它，但我不知道如何做到这一点，因为 useCallback 是一个函数调用。我怎样才能在fetchData 中通过searchValue 在debounce 中。

Answer 1

lodash debounce 接受一个函数作为第一个参数。您可以简单地使用fetchData 作为函数并将searchValue 传递给debounceLoadData，然后在调用时将其传递给fetchData

const debounceLoadData = useCallback(debounce(fetchData, 1000), []);

  useEffect(() => {
    debounceLoadData(searchValue);
    console.log({searchValue})
  }, [searchValue]);

debounce 实际上是返回一个函数，把 debounce 想象成是像

那样实现的

function debounce(func, wait) {
  let timeout
  return function(...args) {
    const context = this
    clearTimeout(timeout)
    timeout = setTimeout(() => func.apply(context, args), wait)
  }
}

所以基本上debounceLoadData 是这里返回的函数，arguments passed to it i.e ...args 然后被传递给原始函数 fetchData，如func.apply(context, args)

同样debounceLoadData只被创建一次，因为回调依赖是[]，你是否将它作为not的依赖传递给useEffect不会有任何区别。

请阅读这篇文章以了解缺少依赖警告

How to fix missing dependency warning when using useEffect React Hook?

Answer 2

我从不喜欢useCallback，它是一个相当令人困惑的钩子，我总是使用useMemo 代替，因为它完全涵盖了useCallback 可以做什么（但不是相反）。

function SearchBar() {
  const [searchValue, setSearchValue] = useState("");

  const handleSearchFieldChange = ((value:string) => {
    setSearchValue(value);
  });

  const debounceLoadData = useMemo(() => debounce(fetchData, 1000), []);
  /**
   * the equivalent of useCallback should be:
   *
   * const debounceLoadData = useCallback(debounce(fetchData, 1000), []);
   * 
   * But I really advice against it!
   * There's unnecessary function invocation compared to useMemo.
   */


  useEffect(() => {
    debounceLoadData(searchValue);  // <- you should pass in arg
    console.log({searchValue})
  }, [searchValue]);

  // ...
}

但对于您的情况，我不认为使用 lodash debounce 是最好的解决方案。

存在一个隐藏的风险，即在卸载组件之后最终调用效果 fetchData。如果fetchData 包含一些状态突变逻辑，则会引发“无法在未安装的组件上调用 setState（或 forceUpdate）”的错误。这不是破坏性的，但也不是最优的。

我建议使用setTimeout/clearTimeout 手动去抖动呼叫。很简单：

useEffect(() => {
  const timeoutId = setTimeout(() => fetchData(searchValue), 1000)
  return () => clearTimeout(timeoutId)
}, [searchValue])

Answer 3

我认为您对功能性setState 语法感到困惑。试试这个：

const debounceLoadData = useCallback(() => debounce(() => fetchData(searchValue), 1000), []);