React中使用Lodash Debounce发起API请求无回调、每次输入都触发请求如何解决？

• 你当前代码每次触发handleChange时，都会重新生成一个全新的防抖函数实例，不同实例的防抖计时相互独立，导致防抖完全失效，每次输入都会直接发起请求。
• 存在语法错误：你将防抖等待时长1000写在了dispatch的入参位置，而非debounce的第二个参数位置，导致回调无法按预期触发。

在React函数组件中，需要将防抖函数实例缓存下来，避免每次渲染/触发事件时重复创建，同时修正参数位置，参考代码如下：

import debounce from "lodash/debounce";
import { useCallback, useEffect } from "react";

// 组件内部逻辑
// 用useCallback缓存防抖函数实例，保证计时逻辑生效
const debouncedGetMovies = useCallback(
  debounce((searchValue) => {
    dispatch(movieActions.getMovies(searchValue));
  }, 1000),
  [] // 可按实际需求添加依赖项，稳定的dispatch不需要放入依赖
);

const handleChange = (event) => {
  const { value } = event.target;
  debouncedGetMovies(value);
};

// 组件卸载时清除未执行的防抖任务，避免内存泄漏
useEffect(() => {
  return () => {
    debouncedGetMovies.cancel();
  };
}, [debouncedGetMovies]);

Material UI组件调用保持原有逻辑即可：

<Autocomplete
  onInputChange={handleChange}
/>

• 防抖函数必须是稳定的单实例，重复创建会导致防抖逻辑完全失效
• 防抖等待时长需要作为debounce方法的第二个参数传入，不要写在内部业务函数的参数里
• 页面/组件销毁时需主动取消未执行的防抖任务，避免组件卸载后仍执行状态更新逻辑引发报错

内容的提问来源于stack exchange，提问作者Fillipo