react實際運用中，為了防止某個元件的異常報錯，導致整個程式都執行不起來，我們通常封裝一個錯誤的元件：

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;
    }
}
 

呼叫，當元件出現錯誤時，載入render返回的內容

<ErrorBoundary render={ (error,errorInfo) => <p>{ '載入時發生錯誤' }</p> }>
   <Errors /> {/*出現錯誤的元件*/}
</ErrorBoundary>