问题描述
这是我封装的组件
useEffect(() => {
error();
},[]);
const error = () => {
try {
return [].replace(/'--'/,'')
} catch (error) {
throw(error)
}
}
和我的错误边界组件
class ErrorBoundary extends Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
console.log('derived',error)
// Update state so the next render will show the fallback UI.
return { hasError: true };
}
componentDidCatch(error,errorInfo) {
console.log('error did catch',error)
this.setState({ hasError: true})
}
render() {
if (this.state.hasError) {
return (
<h1>Something went wrong.</h1>
);
}
return this.props.children;
}
}
然后我像这样声明组件
<ErrorBoundary>
<ProfileContainer />
</ErrorBoundary>
当我的组件加载时,它会按应有的方式捕获错误,并在边界组件中接收错误。它显示错误消息,但随后立即崩溃
我是否以错误的方式处理这个问题?我知道错误边界是针对 DOM 错误的,但有趣的是它正在捕获错误。
非常感谢任何帮助
解决方法
这是故意的。错误边界主要用于生产,但在开发中,React 希望使错误尽可能高度可见(因此无论如何都会出现堆栈跟踪)。
在生产模式下,您的网站将仅显示错误边界 UI。