错误边界的正确使用

转载请注明来自kalinux，并附带文章链接。

错误使用：直接将dom作为children放到错误边界组件中

const A =()=>{
  return <Errorboundary>
     <div>
      这是检测出错误的目标内容
    </div>
  </Errorboundary>
}

正确使用：将dom作为一个子组件放到错误边界组件中

const B = ()=>{
 return  <div>
      这是检测出错误的目标内容
    </div>
}

const A =()=>{
  return <Errorboundary>
     <B />
  </Errorboundary>
}

然后此时B组件中产生的所有js错误才会被Errorboundary捕获。

下面一个完整的例子：

import React  from 'react';
import Errorbandary from './errorbandary'
 
Famous: React.FC = () => {

  const Dom = () => {
   const arr ='';
    return (
      <div className="famous">
         {
           arr.map(item=><span>{item.name}</span>)
         }
      </div>
    );
  };

  return (
    <Errorbandary>
      <Dom />
    </Errorbandary>
  );
};

export default  Famous;

import * as React from 'react';

interface PropsType {
 children: React.ReactNode;
}

interface StateType {
 hasError: boolean,
 Error?: null | Error,
 ErrorInfo?: null | React.ErrorInfo,
}

export default class ErrorBoundary extends React.Component<PropsType, StateType> {
  constructor(props: PropsType) {
    super(props);
    this.state = {
      hasError: false,
      Error: null,
      ErrorInfo: null,
    };
  }

  // 控制渲染降级UI
  static getDerivedStateFromError(error: Error): StateType {
    return { hasError: true };
  }

  // 捕获抛出异常
  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
    this.setState((preState) => (
      { hasError: preState.hasError, Error: error, ErrorInfo: errorInfo }
    ));
  }

  render() {
    const { hasError, Error, ErrorInfo } = this.state;
    const { children } = this.props;

    // 如果捕获到异常，渲染降级UI
    if (hasError) {
      return (
        <div>
          <h1>{`Error:${Error?.message}`}</h1>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            { ErrorInfo?.componentStack}
          </details>
        </div>
      );
    }
    return children;
  }
}

此时界面会展示：

如果不加错误边界， 界面会直接白屏，非常不友好。