当前位置：首页 > React

react如何处理组件异常

2026-01-25 10:19:22React

错误边界（Error Boundaries）

React 16+ 引入了错误边界概念，用于捕获子组件树中的 JavaScript 错误。通过定义 static getDerivedStateFromError() 或 componentDidCatch() 生命周期方法的类组件可成为错误边界。

class ErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    console.error("Caught error:", error, info);
  }

  render() {
    if (this.state.hasError) {
      return <FallbackUI />;
    }
    return this.props.children;
  }
}

使用方式

将需要保护的组件包裹在错误边界中：

<ErrorBoundary>
  <UnstableComponent />
</ErrorBoundary>

错误边界无法捕获以下场景：

事件处理器内的错误（需自行 try/catch）
异步代码（如 setTimeout）
服务端渲染
错误边界自身抛出的错误

事件处理器处理

对组件内的事件处理器错误需使用常规 try/catch：

function ClickComponent() {
  const handleClick = () => {
    try {
      // 可能出错的代码
    } catch (error) {
      console.error(error);
    }
  };

  return <button onClick={handleClick}>Click</button>;
}

异步错误捕获

对 useEffect 或异步操作中的错误，需在 Promise 链中添加 catch 或使用错误边界：

useEffect(() => {
  asyncFetch()
    .then(data => setState(data))
    .catch(error => setErrorState(error));
}, []);

第三方库集成

考虑使用 react-error-boundary 等第三方库简化实现：

import { ErrorBoundary } from 'react-error-boundary';

function ErrorFallback({ error }) {
  return <div>Something went wrong: {error.message}</div>;
}

<ErrorBoundary FallbackComponent={ErrorFallback}>
  <BuggyComponent />
</ErrorBoundary>