如何解决后坐力无法处理异步选择器的错误
Recoil 允许用户在异步选择器中抛出错误,请参阅 its document 了解更多信息。
“
这是我使用“useRecoilValueLoadable()”的代码
import {RecoilRoot,selector,useRecoilValueLoadable} from 'recoil';
const asyncError = selector({
key: 'asyncError',get: async() => { throw new Error("Test Error"); }
});
function test() {
const loadable = useRecoilValueLoadable(asyncError);
return (
<h1>
{ loadable?.state === 'hasError' ? "Has error" : "No error" }
</h1>
);
}
function App() {
return (
<RecoilRoot>
<Test/>
</RecoilRoot>
);
}
export default App;
但是,最后的结果是
我尝试使用
大家好,这个问题怎么解决?谢谢。
解决方法
React 中没有内置的 ErrorBoundary
组件。您必须自己提供或使用图书馆,例如 react-error-boundary。
那么您还必须使用 React.Suspense
,就像您提到的文档中提到的那样。
export default function App() {
return (
<RecoilRoot>
<ErrorBoundary FallbackComponent={Fallback}>
<React.Suspense fallback={<div>loading...</div>}>
<Test />
</React.Suspense>
</ErrorBoundary>
</RecoilRoot>
);
}
此外,您的选择器不是异步的。错误会立即抛出。
查看 this sandbox 以获取有效示例。
要了解有关 ErrorBoundary
组件功能的更多信息,您应该阅读 official react docs。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。