当前位置：首页 > article >正文

如何将错误边界与React的Suspense结合使用？

article 2025/3/13 15:34:11

将错误边界与 React 的 Suspense 结合使用，可以有效地处理组件中的异步操作和错误。Suspense 允许你指定一个加载状态，而错误边界则可以捕获渲染过程中发生的错误。这种结合可以提升用户体验，使应用更具鲁棒性。

1. 理解 Suspense 和错误边界的作用

Suspense：用于处理异步加载的组件，允许你在加载时展示一个占位 UI。
错误边界：捕获子组件树中发生的 JavaScript 错误，并展示回退 UI。

2. 创建错误边界

首先，创建一个错误边界组件。这个组件将在子组件中捕获错误并渲染备用 UI。

import React from 'react';

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

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

    componentDidCatch(error, errorInfo) {
        console.error("Error caught by ErrorBoundary: ", error, errorInfo);
    }

    render() {
        if (this.state.hasError) {
            return <h1>出错了！请稍后再试。</h1>;
        }

        return this.props.children; 
    }
}

export default ErrorBoundary;

3. 使用 Suspense 处理异步组件

你可以使用 React.lazy() 来动态导入组件，并将其与 Suspense 一起使用。以下是一个简单的示例：

import React, { Suspense, lazy } from 'react';
import ErrorBoundary from './ErrorBoundary';

// 动态导入组件
const LazyComponent = lazy(() => import('./LazyComponent'));

const App = () => {
    return (
        <ErrorBoundary>
            <Suspense fallback={<div>加载中...</div>}>
                <LazyComponent />
            </Suspense>
        </ErrorBoundary>
    );
};

export default App;

在这个例子中：

LazyComponent 是一个动态导入的组件。
Suspense 的 fallback 属性指定了在加载时展示的 UI。

4. 处理异步数据加载

如果你的组件需要从 API 加载数据，可以结合 Suspense 和错误边界。以下是一个简化的示例，展示了如何使用 Suspense 加载数据，并在出错时使用错误边界。

4.1 创建一个数据获取的 Suspense 组件

import React, { useState, useEffect } from 'react';

// 模拟数据获取的函数
const fetchData = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            // 可以随机返回错误
            Math.random() > 0.5 ? resolve("成功加载的数据") : reject(new Error("加载失败"));
        }, 2000);
    });
};

// 数据获取组件
const DataFetchingComponent = () => {
    const [data, setData] = useState(null);

    useEffect(() => {
        let isMounted = true;

        fetchData()
            .then(result => {
                if (isMounted) {
                    setData(result);
                }
            })
            .catch(error => {
                if (isMounted) {
                    throw error; // 抛出错误以被错误边界捕获
                }
            });

        return () => {
            isMounted = false; // 清理
        };
    }, []);

    if (!data) {
        throw new Promise(() => {}); // 让 Suspense 等待
    }

    return <div>{data}</div>;
};

4.2 使用 DataFetchingComponent

const App = () => {
    return (
        <ErrorBoundary>
            <Suspense fallback={<div>加载中...</div>}>
                <DataFetchingComponent />
            </Suspense>
        </ErrorBoundary>
    );
};

export default App;