React中使用useCallback实现多文件独立更新的防抖问题

核心思路是给每个文件ID维护独立的防抖函数，避免全局防抖函数互相覆盖调用请求。具体修改如下：

1. 用useRef存储每个文件的防抖函数 #

使用useRef创建一个对象缓存不同文件ID对应的防抖函数，既不会触发组件重渲染，又能保持防抖函数的引用稳定：

import { useRef, useEffect } from 'react';
import _debounce from 'lodash/debounce';
import type { DebouncedFunc } from 'lodash';

// ... 其他组件代码

const updateFileCopies = async (params: addReduceCopiesParams) => {
  return addReduceCopiesMutation.mutateAsync(params);
};

// 存储每个fileId对应的独立防抖函数
const debounceRef = useRef<Record<string, DebouncedFunc<typeof updateFileCopies>>>({});

// 组件卸载时取消所有未执行的防抖调用，避免内存泄漏
useEffect(() => {
  return () => {
    Object.values(debounceRef.current).forEach(fn => fn.cancel());
  };
}, []);

2. 修改addReduceCopies函数，按文件ID绑定防抖逻辑 #

每次调用时，根据当前文件ID获取或创建专属的防抖函数，确保不同文件的调用互不干扰：

const addReduceCopies = async (file: OrderDocumentProps, isAdd = false) => {
  /** 此处查找文件并更新UI状态... **/
  
  const fileId = file.id as string;
  // 获取当前文件的防抖函数，不存在则新建
  let debouncedFn = debounceRef.current[fileId];
  if (!debouncedFn) {
    debouncedFn = _debounce(updateFileCopies, 1000);
    debounceRef.current[fileId] = debouncedFn;
  }
  
  // 调用当前文件专属的防抖函数
  debouncedFn({
    fileId,
    copies: newCopiesNumber
  });
};

效果说明 #

修改后每个文件ID会拥有独立的防抖计时器：

• 对同一文件的多次快速点击，会合并为最后一次调用在1秒后执行
• 不同文件的调用互不干扰，所有文件的最终更新请求都会被发送到服务器

内容的提问来源于stack exchange，提问作者Guilherme do Valle