多次调用 Debounce function

Question

我在 useEffect 中调用以下useEffect 。

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

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

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

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

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

提前致谢

Answer 1

当amount发生变化时， useCallback生成一个新的 function 和一个新的去抖动计时器。 要解决将amount参数传递给 function 的问题，并从useCallback的 deps 数组中删除amount ：

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

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

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