React中useEffect常量依赖配合Error Boundary引发无限循环问题解析

核心循环逻辑 #

你的代码里的无限循环链条是这样的：

1. 子组件ThisComponentWillError抛出错误，ErrorBoundary渲染ErrorFallback组件
2. ErrorFallback挂载时，useEffect作为挂载阶段的副作用必然执行，调用resetErrorBoundary()
3. resetErrorBoundary()触发ErrorBoundary重新渲染子组件，子组件再次抛出错误
4. ErrorBoundary会渲染全新的ErrorFallback组件实例（不是更新原有实例），新实例的useEffect再次执行，重复上述流程

为什么常量依赖数组没用？ #

你误解了useEffect依赖数组的作用：它是用来判断组件更新阶段是否需要重新执行副作用的。但这里的情况是，每次循环都会创建全新的ErrorFallback实例——组件处于重新挂载状态，而非更新状态。对于挂载阶段的useEffect，不管依赖数组是什么（哪怕是常量），都会执行一次，这就是为什么["CONSTANT"]无法阻止循环。

为什么显式检查依赖变化能解决问题？ #

那些Stack Overflow答案里的if检查，本质是在跟踪跨组件实例的依赖值变化。比如你实际场景里的location.pathname：每次ErrorFallback挂载时，需要判断当前路径是否和上次重置时的路径一致——如果一致，就不执行resetErrorBoundary()，避免重复触发循环；只有当路径真的变化（比如用户导航到新页面），才执行重置。

针对你的场景的解决方案 #

以location.pathname为依赖为例，用useRef记录上一次处理过的路径，避免每次挂载都执行重置：

import { useEffect, useRef } from "react";
import { ErrorBoundary } from "react-error-boundary";

function ErrorFallback({ error, resetErrorBoundary }) {
  const prevPathRef = useRef(location.pathname);

  useEffect(() => {
    // 仅当路径真正变化时才执行错误边界重置
    if (location.pathname !== prevPathRef.current) {
      resetErrorBoundary();
      prevPathRef.current = location.pathname;
    }
  }, [location.pathname, resetErrorBoundary]);

  return (
    <div>
      <p>Something went wrong:</p>
      <pre>{error.toString()}</pre>
      <button onClick={resetErrorBoundary}>Try again</button>
    </div>
  );
}

这样修改后，只有用户导航到新路径时才会触发重置；如果只是子组件报错导致ErrorFallback重复渲染，路径未变化就不会执行重置，从而打破循环。

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