问题描述
下图显示了具有这种结构的 Apollo / React App 的 /library 端点:
<App/>
<Home/>
<Library/> // Only renders if a user is logged in
如果用户已登录,App 组件将从我后端的数据库(在“我”查询中)接收用户库中游戏的 id,当用户导航到库时,这些 id 用于从第三方 API 获取游戏的详细信息。
此提取目前是通过 <Library/>
中的 Apollo useQuery() 完成的,但是当用户注销并卸载 Can't perform a React state update on an unmounted component
时,这会导致通常的 <Library/>
警告。
处理该组件异步状态的最佳位置和方法是什么? (没有 Redux)。将状态提升到 App 组件?使用 useLazyQuery 而不是 useQuery 在 Library 组件中使用某种 useEffect?
干杯 =)
编辑:根据要求,这里有一个简化版本的库组件(这个组件直接从后端获取游戏 ID,而不需要从 me 查询中获取游戏 ID)
const Library = () => {
const { data: libraryResponse,loading: libraryLoading } = useQuery(
GET_LIBRARY
);
if (libraryLoading) return <FullPageSpinner />;
const games = libraryResponse?.getLibrary;
if (!games) {
return (
<div>
<div>Your library is empty.</div>
<Link to={'/home'}>Click here to find games!</Link>
</div>
);
}
return <GameList games={games} />;
};
edit2:我可以确认 using useLazyQuery + useEffect instead of useQuery 消除了警告,我不确定这是理想的还是有意的:
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)