使用错误边界在 React.js 中渲染子组件错误

2020-08-27 08:00:00 · 飞浪

简介React组件通常由多个/嵌套的子组件组成，以提高代码质量。将较大的组件分解为不同的子组件是一种实现干净且可重用结构的好方法，但有时这可能会导致一些崩溃，原因是JavaScript代码有问题

简介 React 组件通常由多个/嵌套的子组件组成，以提高代码质量。将较大的组件分解为不同的子组件是一种实现干净且可重用结构的好方法，但有时这可能会导致一些崩溃，原因是 JavaScript 代码有问题、API 使用无效、流程不一致等。这些小的、意外的不一致可能会导致整个应用程序崩溃，这是用户对任何应用程序最不希望出现的行为。为了优雅地处理这些错误，React 16 引入了错误边界组件。

错误边界提供了一种方便的方式来记录错误，同时显示后备 UI 以通知用户可能存在的问题。本指南将介绍错误边界的实现，以处理 React UI 层次结构中的错误，并提供专业提示。

创建错误边界组件

错误边界是普通的 React 组件，充当包装器来捕获来自子组件的错误。通过定义static getDerivedStateFromError(error)或componentDidCatch(error, errorInfo) ，可以简单地将组件转换为错误边界组件：

      import React, { Component } from 'react';

export default class ErrorBoundary extends Component {

    state = { hasError: false };

    static getDerivedStateFromError(error) {
        // Update state to show the fallback UI during the next render phase
        return { hasError: true };
    }

    componentDidCatch(error, info) {
        // logging the error details
        console.log(`Cause: ${error}.\nStackTrace: ${info.componentStack}`);
    }

    render() {
        if (this.state.hasError) {
            // Return the fallback UI
            return <h3 style={{ 'text-align': 'center' }}>Unfortunately, something went wrong.</h3>;
        }

        return this.props.children;
    }
}
    

getDerivedStateFromError和componentDidCatch方法之间的区别基于：

生命周期

getDerivedStateFromError在渲染阶段被调用来更新状态，以便可以根据状态对象中更新的hasError值渲染回退 UI 。另一方面，componentDidCatch在渲染阶段之后的提交阶段被调用，因此更新状态的理想位置是getDerivedStateFromError方法。

范围

您可能已经注意到，componentDidCatch提供了一个额外的信息对象，可用于获取错误堆栈跟踪以进行日志记录。

用例

由于getDerivedStateFromError在 render 方法期间被调用，并且渲染阶段通常比提交阶段慢，因此建议使用componentDidCatch进行错误详细信息处理和日志记录任务。

错误边界实现

一旦创建了错误边界组件，下一步就是简单地将组件层次结构包装在错误边界组件内：

      // index.js
ReactDOM.render(
  <ErrorBoundary>
    <App />
  </ErrorBoundary>,
  document.getElementById('root')
);
    

ErrorBoundary组件包装了App组件，并将捕获App或其子组件中可能出现的任何错误。App组件被故意设计为格式错误，通过对未定义的值调用toLowerCase函数来产生错误：

      export default class App extends Component {
  state = {
    items: ["Banana", "Mango"],
  };

  render() {
    // error: because of invalid index 3, items[3] will return an undefined value
    // invoking toLowerCase on undefined value will produce an error
    const wrongItem = this.state.items[3].toLowerCase();

    return (
      <div className="container">
        <p>{'Hello World!'}</p>
      </div>
    );
  }
}
    

App组件在执行渲染函数时会产生错误。该错误将被 ErrorBoundary 组件捕获，并显示回退错误 UI。

注意：React 将在开发模式下自动显示堆栈跟踪，但此信息不会显示在生产应用中。要查看后备错误 UI，只需按 Esc 键或单击关闭 ( X ) 图标即可在开发模式下删除错误详细信息屏幕。

错误边界与 Try/Catch

错误边界的唯一目的是处理任何嵌套子组件的任何生命周期或渲染函数执行期间的错误。错误边界不处理来自事件处理程序、异步代码（Promise、fetch 等）和 SSR（服务器端渲染）的错误。相反，应使用try-catch块来处理事件处理程序或任何异步任务（例如 Promises、setInterval、requestAnimationFrame 等）中的错误。错误边界和try-catch之间的主要区别是：

渲染错误

使用错误边界来处理层次结构中任何组件创建/更新期间发生的错误，因为try-catch不处理子组件的错误：

      // inside the render function of a component
try{
    // no error will be captured by the catch block during creation/updation of ChildComponent
    return <ChildComponent />
}catch(e){
    console.log('error', e);  
}
    

运行时错误

应该使用 Try-catch 来处理由于无效输入/数据、连接问题或服务器响应不良等原因可能发生的任何潜在问题。

      try{
    var response = getBooksFromStoreAPI();
}catch(e){
    console.log('error', e);
}
    

getBooksFromStoreAPI ()可能会因为响应无效或连接不良而抛出错误，这将由try-catch块处理。

尖端

UI 可以分为几个部分，并为每个部分使用不同的错误边界组件，以保持大部分应用程序顺利运行。
管理状态中的布尔标志以显示后备错误 UI。此外，状态可以存储错误消息详细信息，可用于通知用户有关问题的信息。

结论

错误边界是一项很棒的功能，可以在组件层次结构中优雅地处理错误。本指南解释了在 React 中实现错误边界的必要细节以及最佳实践。确保使用错误边界以获得流畅的用户体验。祝您编码愉快！

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

React框架

阅读全文

使用错误边界在 React.js 中渲染子组件错误

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

import React, { Component } from 'react'; export default class ErrorBoundary extends Component { state = { hasError: false }; static getDerivedStateFromError(error) { // Update state to show the fallback UI during the next render phase return { hasError: true }; } componentDidCatch(error, info) { // logging the error details console.log(`Cause: ${error}.\nStackTrace: ${info.componentStack}`); } render() { if (this.state.hasError) { // Return the fallback UI return <h3 style={{ 'text-align': 'center' }}>Unfortunately, something went wrong.</h3>; } return this.props.children; } }

export default class App extends Component { state = { items: ["Banana", "Mango"], }; render() { // error: because of invalid index 3, items[3] will return an undefined value // invoking toLowerCase on undefined value will produce an error const wrongItem = this.state.items[3].toLowerCase(); return ( <div className="container"> <p>{'Hello World!'}</p> </div> ); } }

// inside the render function of a component try{ // no error will be captured by the catch block during creation/updation of ChildComponent return <ChildComponent /> }catch(e){ console.log('error', e); }