如何解决rect错误边界无法正常工作
在使用react-boundary并引发手动错误时,错误边界有效!问题是,在1-2秒后,它会呈现错误,就好像没有错误边界一样
这是代码
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
// Update state so the next render will show the fallback UI.
return { hasError: true };
}
render() {
console.log('has error',this.state);
if ((this.state as any).hasError) {
// You can render any custom fallback UI
return <h1>Something went wrong.</h1>;
}
return this.props.children;
}
}
function Bomb(): any {
const a = null;
return <span>{a.b.c}</span>;
}
function App() {
const [explode,setExplode] = React.useState(false);
return (
<div>
<button onClick={() => setExplode((e) => !e)}>toggle explode</button>
<ErrorBoundary>{explode ? <Bomb /> : null}</ErrorBoundary>
</div>
);
}
解决方法
对于那些感兴趣的人,我刚刚发现它实际上可以正常工作。 ErrorBoundary 回退被渲染,因为 NODE_ENV 被设置为 development,所以会出现调试覆盖。当您将 display: none
设置为叠加 iframe 时,您会看到预期的“出现问题。”。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。