Question

我正在关注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()不起作用。有人可以告诉我我在代码中做错了什么吗？

Answer 1

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

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

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

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

Answer 2

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

Answer 3

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

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

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

参考：Disable error overlay in development mode

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

3 个答案: