如何解决使用反冲创建简单的状态切片
我有一个 api 请求,我喜欢将响应存储在 Recoil atom 中。
我想弄清楚这样做的最佳方法是什么。
问题是我的选择器没有依赖项(原子),因为我的请求没有参数:
const connectionsQuery = selector({
key: "Connections",get: async () => {
const connections = await findConnections();
return connections;
},});
当我执行以下操作时,出现信息性错误:
这是我使用选择器的方式:
function DashboardLayout() {
const classes = useStyles();
const [isMobileNavOpen,setMobileNavOpen] = useState(false);
console.log(222);
const connections = useRecoilValue(connectionsQuery);
console.log(333);
...
...
'222' 控制台已记录,但 '333' 从未被记录。
我错过了什么?
解决方法
你必须用 Suspense 包装你的组件。 await
使用选择器意味着依赖于该选择器值的组件将暂停渲染,直到有一个值,因为 Recoil 在内部会抛出一个承诺(这是暂停背后的整个想法在 React 中)。
因此,要使其工作,请使用 Suspense 组件包装您的 DashboardLayout
组件:
<React.Suspense fallback={<div>loading...</div>}>
<DashboardLayout/>
</React.Suspense>
这也在 recoil docs 中说明。 要了解有关并发模式和悬念的更多信息,您应该阅读官方 react docs 以了解其背后的机制。
,const connectionsQuery = selector({
key: "Connections",get: async ({ get }) => {
const connections = await get(findConnections);
return connections;
},});
我认为您缺少获取道具, findConnections 是您的响应请求的原子状态,真的吗?还是函数?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。