javascript - React/Next - 我的 debounce 回调没有被正确触发

Question

所以我想触发文本输入变化的去抖动。

这是我的代码。带有文本搜索栏的组件：

  const [searchParams, setSearchParams] = useState('');
  const [searchResponse, setSearchResponse] = useState(null);

  const dataFetch = async (params) => {
    console.log('fetching data');
    console.log('heres the param: ', params);
    fetch('/api/DebounceTest', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ query: params }),
    })
      .then((res) => res.json())
      .then((data) => data)
      .then((moreData) => console.log(moreData))
      .catch((e) => console.error(e));
  };

  // dataFetch = debounce(dataFetch, 1000);

  const callDebounce = (params) => {
    debounce(() => {
      dataFetch(params);
    }, 250);
  };

  const onSearchParamChanged = React.useCallback((params) => {
    callDebounce(params);
  }, []);

  useEffect(() => {
    onSearchParamChanged(searchParams);
  }, [searchParams]);

这是我的去抖：

  let timer;
  return function () {
    console.log('meow');
    clearTimeout(timer);
    timer = setTimeout(() => {
      console.log('calling function');
      fn();
    }, delay);
  };
};

基本上发生的事情是当计时器解决时，去抖动根本没有调用回调。没有错误。我想也许我可以()在 callDebounce 中的 debounce cal 之后添加一个，如下所示：

  const callDebounce = (params) => {
    debounce(() => {
      dataFetch(params);
    }, 250)();
  };

但是 react 会抛出错误“Unhandled Runtime Error TypeError: Object(...)(...) is not a function” 它指向我刚才提到的 debounce 调用。

任何信息都有帮助。谢谢你。

标签： javascriptreactjscallbackdebounce