Redux dispatch防抖未按预期生效，延迟后仍触发多次API请求

• 你的防抖函数失效核心原因是防抖实例在组件重渲染时被重复创建：
  你当前的代码如果是写在React函数组件内部，每次输入框内容变更触发组件重渲染时，debounce(apiCall, 600)都会重新执行，生成一个全新的防抖函数实例，每个实例都有独立的inDebounce定时器变量，之前实例的定时器无法被后续的输入事件清除，最终每个输入触发的定时器都会到期执行，就出现了延迟后多次发起请求的问题。

方案1：用useRef缓存防抖实例（推荐） #

使用useRef保存防抖函数，确保整个组件生命周期内只有一个防抖实例：

import { useRef } from 'react'

// 组件内部逻辑
const apiCall = (args) => {        
  dispatch(getECByStatus({status: 'PENDING_APPROVAL', search: args}))    
}

// 仅组件初始化时生成一次防抖实例
const optimizedVersion = useRef(debounce(apiCall, 600)).current

const handleSearchChange = (value) => {        
  optimizedVersion(value)    
}

方案2：用useCallback缓存防抖函数 #

给防抖函数包裹useCallback，显式指定依赖项确保不会重复生成：

import { useCallback } from 'react'

// 组件内部逻辑
const optimizedVersion = useCallback(debounce((args) => {
  dispatch(getECByStatus({status: 'PENDING_APPROVAL', search: args}))
}, 600), [dispatch])

const handleSearchChange = (value) => {        
  optimizedVersion(value)    
}

类组件适配方案 #

如果你使用的是类组件，可在constructor中初始化防抖实例挂载到实例属性上，避免render时重复生成：

constructor(props) {
  super(props)
  this.optimizedVersion = debounce(this.apiCall.bind(this), 600)
}

额外优化建议 #

如果项目中频繁用到防抖请求，也可以直接把防抖逻辑封装到Redux action层面，避免组件侧重复处理防抖逻辑。

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