react防止页面崩溃

在 React 中，ErrorBoundary 组件是一种用于捕获并处理其子组件树中发生的 JavaScript

错误的机制。它可以帮助你在应用程序中实现优雅的错误处理，防止整个应用崩溃，并为用户提供友好的错误提示。ErrorBoundary 通过使用

React 的生命周期方法 componentDidCatch 来捕获错误，并显示备用 UI。

1. 创建 ErrorBoundary 组件

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

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

2. 所有代码：

javascript 复制代码

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. 使用

javascript 复制代码

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;

4. ErrorBoundary 的工作原理