快捷導(dǎo)航

React錯(cuò)誤邊界Error Boundaries

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

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

首先我們先構(gòu)建出問(wèn)題的場(chǎng)景

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

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

在下面創(chuàng)建一個(gè) error.jsx 組件

參開(kāi)代碼如下

import React from "react";
export default class App extends React.Component{
  constructor(props){
    super(props);
    this.state = {
    }
  }
  render(){
    return (
      <div>
          { null.bingt }
      </div>
    )
  }
}

這時(shí) 就會(huì)有人說(shuō)了你這 null.bingt 不是擺明會(huì)報(bào)錯(cuò)嗎？

沒(méi)錯(cuò) 我們要的就是報(bào)錯(cuò)

找到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)行之后控制臺(tái)直接報(bào)錯(cuò) 界面白屏但其實(shí) App組件上還有個(gè)你好啊說(shuō)明整個(gè)項(xiàng)目都沒(méi)渲染出來(lái)

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

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

顯然是不合理的

此時(shí) 我們可以在 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;
    }
}

此時(shí) 我們的一個(gè)捕獲錯(cuò)誤的組件就寫好了

然后改寫 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>{ '加載時(shí)發(fā)生錯(cuò)誤' }</p>}>
              <Error/>
          </ErrorBoundary>
      </div>
    )
  }
}

此時(shí) 我們將ErrorBoundary捕獲報(bào)錯(cuò)的組件套在了Error外面

然后編寫當(dāng)報(bào)錯(cuò)時(shí) 就渲染

{ ‘加載時(shí)發(fā)生錯(cuò)誤’ }

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