javascript - recoil 无法处理异步选择器的错误
问题描述
Recoil 允许用户在异步选择器中抛出错误,请参阅其文档以了解更多信息。
“<ErrorBoundary/>”和“useRecoilValueLoadable()”都可以用来处理aysnc选择器的错误,但是在我测试的时候,它们都不能正常工作。
这是我使用“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;
但是,最后的结果是
我尝试使用 <ErrorBoundary/> 也得到了同样的意外结果!反冲的版本是“0.2.0”。
大家好,请问如何解决这个问题?谢谢。
解决方案
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>
);
}
此外,您的选择器不是异步的。错误将立即抛出。
查看此沙箱以获取工作示例。要了解有关ErrorBoundary
组件功能的更多信息,您应该阅读官方的 react 文档。
推荐阅读
- scala - Scala Pattern 在单元测试期间匹配方法的结果
- python-3.x - Python3 和 Tkinter,我无法获得单选按钮来更改变量的值。
- php - 你如何配置 Symfony 4 与其他 XAMPP (Apache) 项目一起路由?
- php - php想法加速18000+调用的脚本
- ios - 找不到类方法“+configureWithApplicationID:”(返回类型默认为“id”)
- python - Python:多处理的非常奇怪的行为;后面的代码导致早期代码的“追溯”减速
- javascript - 如何使用 Javascript 在画布上创建和绘制图像数组?
- drools - 在activiti业务规则任务java.lang.NoClassDefFoundError: org/drools/runtime/rule/AgendaFilter
- c++ - 有效地从 arm/neon 中的整数中解交织偶数和奇数位
- reactjs - 如何使用 antd upload react 发送 multipart/form-data