React错误边界

news2024/11/26 16:51:28

首先我们先构建出问题的场景

我们创建一个react项目

然后在src下创建 components 文件夹目录
在下面创建一个 error.jsx 组件
参开代码如下

import React from "react";

export default class App extends React.Component{
  constructor(props){
    super(props);
    this.state = {
    }
  }

  render(){
    return (
      <div>
          { null.bingt }
      </div>
    )
  }
}

这时就会有人说了你这 null.bingt 不是摆明会报错吗？
没错我们要的就是报错

找到src下的 App.js 编写代码如下

import './App.css';
import React from "react";
import Error from "./components/error";

export default class App extends React.Component{
  constructor(props){
    super(props);
    this.state = {
    }
  }

  render(){
    return (
      <div>
          <span>你好</span>
          <Error/>
      </div>
    )
  }
}

运行之后控制台直接报错界面白屏但其实 App组件上还有个你好啊说明整个项目都没渲染出来
在这里插入图片描述

直接白屏版本低一点的react还会出现报错的专门的界面但在上线之后客户看到的就是一片空白

但我们想因为一个组件报错导致整个项目都运行不起来这合理吗？
显然是不合理的

此时我们可以在 components 目录下创建 ErrorBoundary.jsx组件
参考代码如下

import React from "react"

export default class ErrorBoundary extends React.Component{
    state = {
        hasError:false,
        error:null,
        errorInfo:null
    }

    componentDidCatch(error,errorInfo){
        this.setState({
            hasError:true,
            error:error,
            errorInfo:errorInfo
        })
    }
    render(){
        if(this.state.hasError){
            return <div>{ this.props.render(this.state.error,this.state.errorInfo) }</div>
        }
        return this.props.children;
    }
}

此时我们的一个捕获错误的组件就写好了

然后改写 src下的 App.js
代码如下

import './App.css';
import React from "react";
import Error from "./components/error";
import ErrorBoundary from "./components/ErrorBoundary";

export default class App extends React.Component{
  constructor(props){
    super(props);
    this.state = {
    }
  }

  render(){
    return (
      <div>
          <span>你好</span>
          <ErrorBoundary render ={ (error,errorInfo) => <p>{ '加载时发生错误' }</p>}>
              <Error/>
          </ErrorBoundary>
      </div>
    )
  }
}