位置：首页-资讯-前端开发

React错误边界ErrorBoundaries

2023-01-29 12:02

短信预约 -IT技能 免费直播动态提醒

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

我们创建一个react项目

然后在class="lazy" data-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 不是摆明会报错吗？

没错我们要的就是报错

找到class="lazy" data-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;
    }
}

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

然后改写 class="lazy" data-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>
    )
  }
}

此时我们将ErrorBoundary捕获报错的组件套在了Error外面

然后编写当报错时就渲染

{ ‘加载时发生错误’ }

运行结果如下