React Error Boundary fallback UI不渲染、componentDidCatch未触发

你的错误边界不生效是两个核心问题导致的：

• getDerivedStateFromError 写法错误：该生命周期要求返回用于更新组件state的对象，你当前直接return error会把整个state替换为error实例，原有state里的error、errorInfo字段会被清空，render方法里判断this.state.errorInfo永远为假值，自然不会渲染兜底UI。
• 测试方式错误：React错误边界无法捕获事件处理器内部抛出的同步错误，它仅能捕获子组件渲染阶段、生命周期函数、组件构造函数中抛出的错误，onClick回调、setTimeout/setInterval、Promise异步错误、服务端渲染错误都不在它的捕获范围内。

1. 修正getDerivedStateFromError返回值，返回符合state结构的更新对象
2. 调整错误边界的渲染判断逻辑，用独立的hasError标记判断是否展示兜底UI
3. 更换错误边界测试方式，不要在事件回调里直接抛错测试

修正后的错误边界代码：

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null, errorInfo: null };
  }

  static getDerivedStateFromError(error) {
    // 返回state更新值，标记捕获到错误
    return { hasError: true, error };
  }

  componentDidCatch(error, errorInfo) {
    // 该方法仅用于错误日志上报，不需要重复更新error状态
    console.log('捕获组件错误：', error, errorInfo);
    this.setState({ errorInfo });
  }

  render() {
    if (this.state.hasError) {
      return (
        <>
          <h3>Something is wrong!</h3>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            {this.state.error?.toString()}
            <br />
            {this.state.errorInfo?.componentStack}
          </details>
        </>
      );
    }
    return this.props.children;
  }
}

• 验证渲染错误捕获：在SimpleBtn/SimpleBtn2这类子组件的render方法里直接抛出错误，比如throw new Error('测试渲染错误')，即可看到兜底UI正常渲染。
• 捕获事件/异步错误：事件回调、异步请求里的错误无法被错误边界直接捕获，需要先将错误存入组件state，在render阶段主动抛出错误才能被边界捕获，示例写法：

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { toggle: false, renderError: null };
  }

  // ...其余原有toggleBtn逻辑

  render() {
    // 先判断是否有要抛出的错误，有就直接抛，交给错误边界处理
    if (this.state.renderError) {
      throw this.state.renderError
    }

    const { toggle } = this.state;
    return (
      <ErrorBoundary>
        <Suspense fallback={<div>...Loading</div>}>
          <h1> Sample file </h1>
          {toggle && <SimpleBtn toggleBtn={this.toggleBtn} />}
          <SimpleBtn2 toggleBtn={this.toggleBtn} />
          <button
            onClick={() => {
              // 事件回调里不直接抛错，先存到state
              this.setState({
                renderError: new Error("i am error!")
              })
            }}
          >
            Throw Error
          </button>
        </Suspense>
      </ErrorBoundary>
    );
  }
}

组件状态截图

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