多次调用去抖功能答案

【问题标题】：Debounce function called multiple times多次调用去抖功能
【发布时间】：2023-01-10 03:29:54
【问题描述】：

我在useEffect 中调用了以下函数。

useEffect(() => {
  loadData();
}, [amount]);

loadData 函数使用 Lodash debounce 函数。当我从输入更新金额时，loadData 会根据 amount 字符串的长度被调用多次。

const loadData = useCallback(
  debounce(() => {
    console.log('called!');

    // Fetch data from API ...
  }, 1000),
  [amount]
);

尽管使用了useCallback hook 和 1s debounce。它返回多次。如何解决？

提前致谢

【问题讨论】：

debounce 函数本身需要被重用。使用您的代码，每次数量更改时，您都会重新创建去抖动函数回调。

标签： javascript react-native react-hooks lodash

【解决方案1】：

当amount 发生变化时，useCallback 会生成一个带有新去抖定时器的新函数。要解决这个问题，请将amount 参数传递给函数，并从useCallback 的 deps 数组中删除amount：

const loadData = useCallback(
  debounce((amount) => {
    console.log('called!', amount);

    // Fetch data from API ...
  }, 1000),
  []
);

useEffect(() => {
  loadData(amount);
}, [amount]);

【讨论】：