React错误边界Error Boundaries

时间:2023-02-03 -耿瑞- 人气:0

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

我们创建一个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>
    )
  }
}

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

然后编写当报错时就渲染

{ ‘加载时发生错误’ }

运行结果如下

控制台依旧会输出报错信息但将不会运行到其他组件的渲染而且我们指定报错后渲染的

{ ‘加载时发生错误’ }

也成功渲染出来了

就是之后我们指定可能某个组件会报错就可以用这个组件套一下避免一个组件报错整个项目白屏的情况

加载全部内容