我正在尝试在React中实现错误边界。但由于某种原因,它不起作用。代码如下:
- 错误边界.js*
import React from 'react';
class ErrorBoundary extends React.Component {
// Equivalent to:
// const [hasError, setHasError] = useState(false);
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError() {
return { hasError: true };
}
componentDidCatch(error, errorInfo) {
console.error(error);
console.info({ errorInfo });
}
render() {
if (this.state.hasError) {
return this.props.fallback || null;
}
return this.props.children;
}
}
export default ErrorBoundary;
- Counter.js*
import React from 'react';
const Counter = ({ user }) => {
if (!user) {
throw new Error('Error Some');
}
return <div>{user.toUpperCase()}</div>;
};
export default Counter;
- App.js*
import React from 'react';
import ErrorBoundary from './ErrorBoundary';
import Counter from './Counter';
function App() {
return (
<ErrorBoundary fallback={<div>this is fallback UI</div>}>
<Counter />
</ErrorBoundary>
);
}
export default App;
下面是live代码。
1条答案
按热度按时间7gyucuyw1#
它将在生产中工作,您看不到回退ui的原因是因为它位于错误覆盖iframe下,如果您关闭错误覆盖(右上角的X)或添加
iframe { display: none;}
到你的
style.css
(并导入style.css)这里有一个更新的代码https://stackblitz.com/edit/stackblitz-starters-funblb?file=src%2Fstyle.css