Javascript ErrorBoundary未在React中重新呈现回退UI

我遵循reactjs.org上的教程，正在练习用错误边界捕捉错误。我编写了自己的代码，类似于教程的代码，但我发现边界不会重新呈现回退UI。我使用的是React的16.8.6版。这是我的密码：

ErrorBoundary.js

：

从“React”导入React
export const ErrorContext=React.createContext({
错误：null，
errorInfo:null，
点击次数：0，
增量：（）=>{}，
})
导出默认类ErrorBoundary扩展React.Component{
建造师（道具）{
超级（道具）；
this.increment=（）=>{
this.setState（state=>({
clickCount:state.clickCount+1
}))
}//方法将每次单击的clickCount增加1
此.state={
错误：null，
errorInfo:null，
点击次数：0，
增量：this.increment
}
}
resetDefault（）{//将单击次数重置为零的方法（修复错误）
这是我的国家({
点击次数：0，
错误：null，
errorInfo:null
})
}
componentDidCatch（错误，errorInfo）{
这是我的国家({
错误：错误，
errorInfo:errorInfo
})
console.log（this.state.error）
}
render（）{
如果（this.state.error）{//回退UI
返回(
发生了一个错误！！
{this.state.error}


{this.state.errorInfo}
单击此处修复错误
)
}
返回(
{this.props.children}
)
}
}

ErrorSprower

：

从“React”导入React
从“./ErrorBoundary”导入{ErrorContext}
类ErrorSprower扩展了React.Component{
静态contextType=ErrorContext
建造师（道具）{
超级（道具）；
}
render（）{
if（this.context.clickCount==6）{
抛出新错误（'ErrorOccursed'）
}
返回(
点击次数：{this.context.clickCount}
点击这里！！！
)
}
}
导出默认错误抛出器

App.js

：

从“React”导入React；
从“./components/ErrorBoundary”导入ErrorBoundary
从“./components/ErrorThrower”导入ErrorThrower；
函数App（）{
返回(
);
}
导出默认应用程序；

---

在教程之后（您可以在这个链接上找到：），我创建了

ErrorThrower

组件，它呈现一个标题和一个按钮。当我单击按钮5次以上时，将抛出一个错误，React将呈现回退UI以显示错误日志。我还添加了另一项功能，允许我在单击回退UI中的按钮时修复错误（将单击次数设置为0）。但是，当我运行project React时，它不会使UI回退以显示错误，而是像正常情况一样打印错误堆栈跟踪。在

componentDidCatch（）

方法中，控制台打印出空值，我认为

setState（）

不起作用。任何人都可以告诉我我在代码中做错了什么？

根据文档，如果要呈现回退，应该使用

static getDerivedStateFromError

componentDidCatch

应仅用于记录错误

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

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

---

根据文档，如果要呈现回退，应使用

静态getDerivedStateFromError

componentDidCatch

应仅用于记录错误

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

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

---

这可能是由于创建了react应用程序的react overlay错误工具，该工具从错误边界显示回退UI上的错误

---

只需关闭带有错误的iframe，您的回退UI就会显示出来

这可能是由于创建了react应用程序的react overlay error tool，该工具从错误边界显示回退UI上的错误

---

只要关闭带有错误的iframe，您的回退UI就会显示出来。

以下是我的情况：我在呈现React组件时出错会触发最近的错误边界来呈现回退UI。但几秒钟后，堆栈跟踪显示出来并覆盖了我的备用UI

答：这是CreateReact应用程序中的错误覆盖，它仅在开发模式下工作

您只需单击右上角的十字按钮即可显示您的备用UI

---

参考资料：

以下是我的情况：我在呈现React组件时出错会触发最近的错误边界来呈现回退UI。但几秒钟后，堆栈跟踪显示出来并覆盖了我的备用UI

答：这是CreateReact应用程序中的错误覆盖，它仅在开发模式下工作

您只需单击右上角的十字按钮即可显示您的备用UI

---

参考资料：

我试着使用

getDerivedStateFromError

来呈现回退UI，结果成功了。但是，React只显示回退UI几秒钟，然后像以前一样显示错误stacktrace。你能解释一下这是怎么发生的吗？我无法解释，但如果你用新代码更新你的问题，可能会有所帮助。@QuangBìnhĐinh，你的渲染是否在

getDerivedStateFromError

中？如果是这样，不要。从文档中，该方法中有这样一条注释，“

//更新状态，以便下一次呈现将显示回退UI。

”。这表明此方法仅在转换时调用，更新错误状态以便可以在下一次渲染中使用。您可以看到一个

if（this.state.hasError）

检查示例代码的

render

方法。我尝试使用

getDerivedStateFromError

来呈现回退UI，但效果不错。但是，React仅显示后备UI几秒钟，然后