我已经实现了 react-error-boundary
npm 库的一个示例。但它似乎没有正常工作。
import * as React from 'react';
import { ErrorBoundary } from 'react-error-boundary';
function ErrorFallback({ error }) {
return (
<div role="alert">
<p>Something went wrong:</p>
<pre style={{ color: 'red' }}>{error.message}</pre>
</div>
);
}
function Greeting({ subject }) {
return <div>Hello {subject.toUpperCase()}</div>;
}
function Farewell({ subject }) {
return <div>Goodbye {subject.toUpperCase()}</div>;
}
function App() {
return (
<ErrorBoundary FallbackComponent={ErrorFallback}>
<Greeting />
<Farewell />
</ErrorBoundary>
);
}
export default App;
错误信息如下所示:
ErrorFallback
组件似乎没有渲染。我想我做错了什么会破坏代码。
最佳答案
这是错误边界在开发期间的预期行为。按下右上角的关闭(X)按钮隐藏错误堆栈,您将看到 Error Boundary Fallback
在生产中,不会显示错误堆栈,用户只会看到错误边界回退。
关于reactjs - 如何在 react 中正确使用 react 错误边界?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65194048/