React錯誤邊界Error Boundaries

更新時間：2023年01月29日 11:30:02 作者：-耿瑞-

錯誤邊界是一種React組件,這種組件可以捕獲發(fā)生在其子組件樹任何位置的JavaScript錯誤,并打印這些錯誤,同時展示降級UI,而并不會渲染那些發(fā)生崩潰的子組件樹

首先我們先構(gòu)建出問題的場景

我們創(chuàng)建一個react項(xiàng)目

然后在src下創(chuàng)建 components 文件夾目錄

在下面創(chuàng)建一個 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>
    )
  }
}

運(yùn)行之后控制臺直接報錯界面白屏但其實(shí) App組件上還有個你好啊說明整個項(xiàng)目都沒渲染出來

直接白屏版本低一點(diǎn)的react還會出現(xiàn)報錯的專門的界面但在上線之后客戶看到的就是一片空白

但我們想因?yàn)橐粋€組件報錯導(dǎo)致整個項(xiàng)目都運(yùn)行不起來這合理嗎？

顯然是不合理的

此時我們可以在 components 目錄下創(chuàng)建 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>{ '加載時發(fā)生錯誤' }</p>}>
              <Error/>
          </ErrorBoundary>
      </div>
    )
  }
}

此時我們將ErrorBoundary捕獲報錯的組件套在了Error外面

然后編寫當(dāng)報錯時就渲染

{ ‘加載時發(fā)生錯誤’ }

運(yùn)行結(jié)果如下