如何解决React 中的错误边界无法按预期工作
我使用 react-error-boundary
来实现 <ErrorBoundary>
,方法是将其包裹在可能引发错误的组件周围
export default function App() {
const [query,setQuery] = useState("");
const handleReset = () => setQuery("");
return (
<div className="App">
<input
value={query}
onChange={(e) => {
setQuery(e.target.value);
}}
/>
<FormErrorBoundary onReset={handleReset} resetKeys={[query]}>
<Form query={query} />
</FormErrorBoundary>
</div>
);
}
function Form({ query }) {
if (query === "error") throw new Error("foo");
return <p>{query}</p>;
}
function FormErrorBoundary(props) {
return <ErrorBoundary FallbackComponent={ErrorFallBack} {...props} />;
}
function ErrorFallBack({ error,resetErrorBoundary }) {
return (
<div role="alert">
There was an error
<pre>{error.message}</pre>
<button onClick={resetErrorBoundary}>Try again</button>
</div>
);
}
这个想法是,当我们在输入字段中输入 error
时,Form
组件应该抛出一个错误,错误边界应该捕获它并显示一个带有重试按钮的 UI
但是,如果我在输入字段中输入 error
,应用程序仍然会崩溃。看看这个截图。
只有在您点击 x
将其关闭后,您才能看到错误边界在起作用,并且您可以点击重试按钮。但我认为错误边界可以防止它崩溃。我是否错误地实现了它,或者这是 React 中错误边界的预期行为?
现场演示:https://codesandbox.io/s/error-boundary-bz2ir?file=/src/App.js
解决方法
如果您处于开发模式,您将始终看到错误堆栈。如果您在启动错误时获得生产模式应用程序版本,您将只会看到错误边界。 (如果一切正常)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。