React组件渲染错误处理：避免页面崩溃，仅展示出错组件提示

1. 用React错误边界（Error Boundary）隔离子组件错误 #

错误边界是React官方提供的组件级错误捕获机制，能捕获子组件树内的渲染错误，用备用UI替换出错组件，避免整个页面崩溃。

实现错误边界组件 #

import React, { Component, ErrorInfo, ReactNode } from 'react';

interface ErrorBoundaryProps {
  children: ReactNode;
  fallback: ReactNode;
}

interface ErrorBoundaryState {
  hasError: boolean;
}

class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
  constructor(props: ErrorBoundaryProps) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(_: Error): ErrorBoundaryState {
    // 更新状态以渲染备用UI
    return { hasError: true };
  }

  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    // 可选：在这里记录错误日志到服务端
    console.error('子组件渲染出错:', error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return this.props.fallback;
    }
    return this.props.children;
  }
}

export default ErrorBoundary;

在父组件中包裹子组件 #

修改App组件，给每个循环渲染的MainContent套上错误边界：

function App() {
  const data = [
    { message: 'first message' },
    { message: 'second message' },
    { wrongkey: 'third message' },
  ];

  return (
    <div>
      <Header />
      {data.map((item, index) => (
        <ErrorBoundary 
          key={index} 
          fallback={<p style={{color: 'red'}}>该内容加载失败，请检查数据格式</p>}
        >
          <MainContent message={item} />
        </ErrorBoundary>
      ))}
      <Footer />
    </div>
  );
}

2. TypeScript类型约束+类型守卫提前拦截异常数据 #

通过TypeScript定义预期数据结构，用类型守卫在渲染前过滤不符合规范的数据，从源头减少错误：

定义数据接口 #

interface ValidDataItem {
  message: string;
}

实现类型守卫函数 #

function isValidDataItem(item: unknown): item is ValidDataItem {
  return typeof item === 'object' && item !== null && 'message' in item && typeof (item as ValidDataItem).message === 'string';
}

在父组件中过滤数据 #

function App() {
  const data = [
    { message: 'first message' },
    { message: 'second message' },
    { wrongkey: 'third message' },
  ];

  return (
    <div>
      <Header />
      {data.map((item, index) => (
        <ErrorBoundary 
          key={index} 
          fallback={<p style={{color: 'red'}}>该内容加载失败，请检查数据格式</p>}
        >
          {isValidDataItem(item) ? (
            <MainContent message={item} />
          ) : (
            <p style={{color: 'orange'}}>数据格式不符合要求</p>
          )}
        </ErrorBoundary>
      ))}
      <Footer />
    </div>
  );
}

3. 子组件内部异常捕获（兜底补充） #

可以在子组件中用try-catch包裹可能出错的逻辑，作为错误边界之外的第二层防护：

function MainContent(props: { message: ValidDataItem }) {
  let displayText = '';
  try {
    displayText = props.message.message.substring(1, 5);
  } catch (error) {
    displayText = '内容解析失败';
  }

  return (
    <main>
      <p>{displayText}</p>
    </main>
  );
}

内容的提问来源于stack exchange，提问作者Md. Parvez Alam