React中如何在防抖功能Hook内获取状态的最新值？

针对你遇到的防抖函数内拿不到最新状态、加依赖又破坏防抖结构的问题，有个简单直接的解决方法：用useRef跟踪需要的状态，让防抖函数能访问到实时值。

具体步骤如下：

1. 新增一个useRef变量，用来同步目标状态的最新值
2. 用useEffect在状态变化时更新这个ref的current属性
3. 在防抖函数内部，通过ref的current获取最新状态值

修改后的代码示例：

// 假设你原本的状态定义是这样的
const [memoizedMachineGroupsErrorIndicator, setMemoizedMachineGroupsErrorIndicator] = useState(/* 初始值 */);

// 新增ref跟踪最新状态
const errorIndicatorRef = useRef(memoizedMachineGroupsErrorIndicator);

// 状态变化时同步更新ref
useEffect(() => {
  errorIndicatorRef.current = memoizedMachineGroupsErrorIndicator;
}, [memoizedMachineGroupsErrorIndicator]);

// 原防抖函数保持不变，只是在内部用ref取最新值
const debouncedCreate = useRef(
  debounce(async (data) => {
    try {
      const result = await dispatch(createMachineGroup(data)).unwrap();
      // ... 其他逻辑
    } catch (error) {
      // 这里用ref.current获取最新的状态值
      if (isset(() => errorIndicatorRef.current)) {
        // ... 你的处理逻辑
      }
    }
  }, 300),
).current;

原理说明 #

防抖函数是在组件初始化时创建的，它的闭包会捕获当时的状态值，后续状态更新时防抖函数内部的变量不会自动同步。通过useRef来跟踪状态，利用ref的current属性可以被随时修改且不会触发组件重新渲染的特性，让防抖函数无论何时执行，都能拿到最新的状态值，同时不需要把状态加到防抖函数的依赖项里，不会破坏原有的防抖延迟逻辑。

如果你的防抖逻辑需要依赖多个状态，只需要把这些状态都加到useEffect的依赖数组里，同步更新对应的ref即可。

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