react防止页面崩溃

news2024/12/26 6:48:15

在 React 中，ErrorBoundary 组件是一种用于捕获并处理其子组件树中发生的 JavaScript
错误的机制。它可以帮助你在应用程序中实现优雅的错误处理，防止整个应用崩溃，并为用户提供友好的错误提示。ErrorBoundary 通过使用
React 的生命周期方法 componentDidCatch 来捕获错误，并显示备用 UI。

1. 创建 ErrorBoundary 组件
要创建一个 ErrorBoundary 组件，你需要遵循以下步骤：

继承 React.Component：ErrorBoundary 必须是一个类组件。
实现 componentDidCatch 方法：这是
ErrorBoundary 的核心方法，用于捕获子组件树中的错误。
提供备用 UI：当捕获到错误时，ErrorBoundary
应该渲染一个备用的用户界面，而不是显示默认的错误堆栈。

2. 所有代码：

import React, { Component } from "react";
import { withRouter } from "react-router-dom";
import { Result } from "antd";
import { CloseCircleOutlined } from "@ant-design/icons";
class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }
  componentDidUpdate(prevProps) {
    // 检查路由地址是否发生变化
    const { pathname, search } = this.props.location;
    const { pathname: prevpathname, search: prevsearch } = prevProps.location;

    if (pathname + search !== prevpathname + prevsearch) {
      this.setState({ hasError: false });
      // 你可以在这里执行其他逻辑，比如重新获取数据等
    }
  }

  static getDerivedStateFromError(error) {
    console.error("RSErrorBoundary：", error);
    // 更新状态以显示降级 UI
    return { hasError: true };
  }

  //   componentDidCatch(error, errorInfo) {
  // 你可以将错误日志发送到服务器
  // console.error("Error caught by ErrorBoundary:", error, errorInfo);
  //   }

  render() {
    // 增加报错页面渲染页面
    if (this.state.hasError) {
      // 你可以渲染任意降级 UI
      return (
        <div>
          <Result
            style={{
              margin: "0px 20px ",
              borderRadius: 4,
              backgroundColor: "#fff",
            }}
            // status="error"
            status="500"
            icon={<CloseCircleOutlined />}
            title="页面错误，请联系管理员！"
            // extra={<Button type="primary">Next</Button>}
          />
        </div>
      );
    }

    return this.props.children;
  }
}

export default withRouter(ErrorBoundary);

3. 使用

import React from 'react';
import ErrorBoundary from './ErrorBoundary';
import MyComponent from './MyComponent';

function App() {
  return (
    <div>
      <h1>My Application</h1>
      {/* 使用 ErrorBoundary 包裹可能抛出错误的组件 */}
      <ErrorBoundary>
        <MyComponent />
      </ErrorBoundary>
    </div>
  );
}

export default App;