在React函数组件中使用错误边界和errorElement进行错误处理

在React 18中,函数组件可以使用两种方式来处理错误:

  1. 使用 ErrorBoundary

ErrorBoundary 是一种基于类的组件,可以捕获其子组件树中的任何 JavaScript 错误,并记录这些错误、渲染备用 UI 而不是冻结的组件树。

在函数组件中使用 ErrorBoundary,需要先创建一个基于类的 ErrorBoundary 组件,然后将函数组件包裹在其中:

js 复制代码
import React from 'react';

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

  static getDerivedStateFromError(error) {
    // 更新 state 使下一次渲染能够显示降级 UI
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // 你同样可以将错误记录到一个错误报告服务器
    console.log(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // 你可以自定义降级后的 UI 并渲染
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children; 
  }
}

function MyFunctionComponent() {
  // ...
}

// 使用 ErrorBoundary 包裹函数组件
const WrappedComponent = () => (
  <ErrorBoundary>
    <MyFunctionComponent />
  </ErrorBoundary>
);
  1. 使用 errorElement 属性 (React 18)

在 React 18 中,你可以在根组件上使用 errorElement 属性来指定发生错误时要渲染的 UI。这个属性可以直接在函数组件上使用:

js 复制代码
import React from 'react';

function ErrorUI() {
  return <h1>Something went wrong.</h1>;
}

function MyFunctionComponent() {
  // ...
  return (
    <>
      {/* 组件树 */}
      {errorElement && <ErrorUI />}
    </>
  );
}

// 在根组件上使用 errorElement
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <MyFunctionComponent errorElement={<ErrorUI />} />
  </React.StrictMode>
);

在上面的示例中,如果在 MyFunctionComponent 组件树中发生错误,React 会自动卸载组件树,并替换为传递给 errorElement 属性的 UI。

注意,errorElement 只适用于根组件。如果需要为嵌套的组件树提供错误边界,你仍然需要使用 ErrorBoundary 组件。

总的来说,ErrorBoundary 是一种更通用的错误处理方式,可用于任何组件及其子组件树。而 errorElement 提供了一种更简单的方式来处理根组件中的错误。你可以根据项目的需求选择合适的方式。

相关推荐
FinGet11 小时前
那总结下来,react就是落后了
前端·react.js
王解14 小时前
Jest项目实战(2): 项目开发与测试
前端·javascript·react.js·arcgis·typescript·单元测试
AIoT科技物语1 天前
免费,基于React + ECharts 国产开源 IoT 物联网 Web 可视化数据大屏
前端·物联网·react.js·开源·echarts
初遇你时动了情1 天前
react 18 react-router-dom V6 路由传参的几种方式
react.js·typescript·react-router
番茄小酱0011 天前
ReactNative中实现图片保存到手机相册
react native·react.js·智能手机
王解1 天前
Jest进阶知识:深入测试 React Hooks-确保自定义逻辑的可靠性
前端·javascript·react.js·typescript·单元测试·前端框架
小牛itbull1 天前
ReactPress—基于React的免费开源博客&CMS内容管理系统
前端·react.js·开源·reactpress
~甲壳虫2 天前
react中得类组件和函数组件有啥区别,怎么理解这两个函数
前端·react.js·前端框架
用户8185216881172 天前
react项目搭建create-router-dom,redux详细解说
react.js
new Vue()2 天前
Vue vs React:两大前端框架的区别解析
vue.js·react.js·前端框架