我正在关注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()
不起作用。有人可以告诉我我在代码中做错了什么吗?
答案 0 :(得分:0)
根据文档,如果要渲染后备,则应使用static getDerivedStateFromError
。 componentDidCatch
仅应用于记录错误。
static getDerivedStateFromError(error, errorInfo) {
return {
error,
errorInfo
}
}
componentDidCatch(error,errorInfo){
console.log(error)
}
答案 1 :(得分:0)
这可能是由于create-react-app的react-overlay-error工具显示了错误边界上的后备UI上的错误 只需关闭iframe并显示错误,就会显示您的后备用户界面
答案 2 :(得分:0)
这是我的情况:我在渲染React组件时发生错误,触发了最接近的错误边界来渲染后备UI。但是几秒钟后,堆栈跟踪就会显示出来,并覆盖了我的后备UI。
答案:这是create-react-app中的错误叠加层,仅在开发模式下有效。
您只需单击右上角的十字按钮即可显示后备用户界面。