Javascript 反应/下一步-未正确触发我的去盎司回调

所以我想在文本输入改变时触发一个去抖动

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

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

这是我的debounce：

  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会抛出错误 “未处理的运行时错误 TypeError:对象（…）（…）不是函数“ 它指向了我刚才提到的去盎司通话

---

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

您应该使用useCallback钩子：下面是一个使用自定义UseAncyEffect钩子的实时搜索演示，可能会对您的挑战有所帮助