ErrorBoundary无法在React中重新呈现后备UI

时间:2019-07-26 10:26:30

标签: javascript reactjs

我正在关注reactjs.org上的教程,并且正在练习使用错误边界捕获错误。我已经编写了自己的代码,类似于本教程的代码,但是我发现Boundary不会重新呈现后备UI。我正在使用React的16.8.6版本。这是我的代码:

ErrorBoundary.js

import React from 'react'

export const ErrorContext = React.createContext({
   error: null,
   errorInfo: null,
   clickCount: 0,
   increment : () =>{},

})
export default class ErrorBoundary extends React.Component{
   constructor(props){
       super(props);
       this.increment = ()=>{
           this.setState(state => ({
               clickCount : state.clickCount + 1
           }))
       }//method to increment clickCount by 1 per click
       this.state = {
           error: null,
           errorInfo: null,
           clickCount: 0,
           increment: this.increment
       }

   }
   resetDefault(){//method to reset number of click to zero (fix error)
       this.setState({
           clickCount: 0,
           error: null,
           errorInfo: null
       })
   }
   componentDidCatch(error,errorInfo){

       this.setState({
           error: error,
           errorInfo: errorInfo
       })
       console.log(this.state.error)
   }
   render(){
       if(this.state.error){//fallback UI
           return(
               <div>
                   <h2>An error has occured!!</h2>
                   <details>
                       {this.state.error}
                       <br/>
                       {this.state.errorInfo}
                   </details>
                   <button onClick = {this.resetDefault.bind(this)}>Click here to fix error </button>
               </div>
           )
       }
       return(

               <ErrorContext.Provider value = {this.state}>
                   {this.props.children}
               </ErrorContext.Provider>

       )
   }

}

ErrorThrower

import React from 'react'
import {ErrorContext} from './ErrorBoundary'
class ErrorThrower extends React.Component{
    static contextType = ErrorContext
    constructor(props){
        super(props);
    }


    render(){
       if(this.context.clickCount === 6) {
          throw new Error('ErrorOccured')
       }
           return(
               <div>
                   <h2>Number of click count : {this.context.clickCount}</h2>
                   <button onClick = {this.context.increment}>Click here !!!</button>
               </div>
           )

    }
}
export default ErrorThrower

App.js

import React from 'react';
import ErrorBoundary from './components/ErrorBoundary'
import ErrorThrower from './components/ErrorThrower';

function App() {
  return (
    <div className="App">
       <ErrorBoundary>
           <ErrorThrower></ErrorThrower>
       </ErrorBoundary>
    </div>
  );
}

export default App;

在学习本教程之后(您可以在此链接上找到:https://reactjs.org/docs/error-boundaries.html),我创建了ErrorThrower组件,该组件呈现一个标题和一个按钮。当我单击按钮超过5次时,将引发错误,React将渲染后备UI来显示错误日志。并且我添加了另一个功能,当我在后备用户界面中单击按钮时,该错误使我可以修复错误(将点击计数设置为0)。但是,当我运行项目React不会回退UI来显示错误时,它会像正常情况一样打印出错误stacktrace。在componentDidCatch()方法中,控制台打印出空值,我认为setState()不起作用。有人可以告诉我我在代码中做错了什么吗?

3 个答案:

答案 0 :(得分:0)

根据文档,如果要渲染后备,则应使用static getDerivedStateFromErrorcomponentDidCatch仅应用于记录错误。

   static getDerivedStateFromError(error, errorInfo) {
     return {
       error,
       errorInfo
     }
   }

   componentDidCatch(error,errorInfo){
     console.log(error)
   }

https://reactjs.org/docs/error-boundaries.html

答案 1 :(得分:0)

这可能是由于create-react-app的react-overlay-error工具显示了错误边界上的后备UI上的错误 只需关闭iframe并显示错误,就会显示您的后备用户界面

答案 2 :(得分:0)

这是我的情况:我在渲染React组件时发生错误,触发了最接近的错误边界来渲染后备UI。但是几秒钟后,堆栈跟踪就会显示出来,并覆盖了我的后备UI。

enter image description here

答案:这是create-react-app中的错误叠加层,仅在开发模式下有效。

您只需单击右上角的十字按钮即可显示后备用户界面。

参考:Disable error overlay in development mode