React：如何解决useEffect中的循环依赖问题

你的问题出在useEffect监听了cacheQueue的所有变化，但在处理队列项时会调用updateCacheQueueItem修改cacheQueue的状态（比如设置isCaching: true），这又会触发useEffect重新执行，形成无限循环。

方案一：用Ref跟踪已处理的URI，避免重复触发 #

添加一个useRef来记录已经处理过的URI，在useEffect中只处理从未被处理过的队列项：

const useExternalCache = () => {
  const [filePath, setFilePath] = useState('');
  const [cacheQueue, setCacheQueue] = useImmer<CacheQueue[]>([]);
  // 新增Ref跟踪已处理的URI
  const processedUris = useRef<Set<string>>(new Set());

  // ... 其他原有代码保持不变 ...

  useEffect(() => {
    // 过滤出：未处理过、且未在缓存/缓存中的项
    const toProcess = cacheQueue.filter(item => {
      return !processedUris.current.has(item.uri) && !(item.isCaching || item.isCached);
    });

    toProcess.forEach(item => {
      processedUris.current.add(item.uri);
      addToCacheQueue(item);
    });
  }, [cacheQueue, addToCacheQueue]);

  // ... 其他原有代码保持不变 ...
}

方案二：在添加队列项时直接触发处理，跳过useEffect监听 #

既然handleAdd和handleAddAll是新增队列项的入口，直接在这两个方法里调用addToCacheQueue，完全去掉依赖cacheQueue的useEffect，从根源避免循环：

const useExternalCache = () => {
  const [filePath, setFilePath] = useState('');
  const [cacheQueue, setCacheQueue] = useImmer<CacheQueue[]>([]);

  const handleAdd = useCallback((queueItem: CacheQueue) => {
    setCacheQueue((draft) => {
      if (!draft.find((item) => item.uri === queueItem.uri)) {
        draft.push(queueItem);
      }
    });
    // 直接触发处理
    addToCacheQueue(queueItem);
  }, [addToCacheQueue]);

  const handleAddAll = useCallback(
    (queueItems: CacheQueue[]) => {
      setCacheQueue((draft) => {
        const unique = Lodash.xorBy(queueItems, draft, 'uri');
        unique.forEach(item => {
          draft.push(item);
          // 直接触发处理每个新增项
          addToCacheQueue(item);
        });
      });
    },
    [addToCacheQueue],
  );

  // ... 其他原有代码保持不变 ...

  // 移除原来的useEffect
}

方案说明 #

• 方案一适合需要依赖队列整体状态做批量处理的场景，通过Ref隔离已处理项，避免重复触发；
• 方案二更高效，直接在数据入口处触发处理逻辑，不需要依赖状态变化监听，彻底消除循环可能。

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