在新项目中使用react-query并存在小问题。要求是在加载数据之前在空页面上显示加载微调器，而不是在用户使用不同的查询获取新结果之后在先前结果上方显示微调器。
第一个案例非常简单，而且有充分的证据：
const { isLoading, error, data } = useQuery(["list", query], () =>
fetch(`https://api/list/${query}`)
);
if (isLoading) return <p>Loading...</p>;
return <div>{data.map((item) => <ListItem key={item.id} item={item}/></div>但是，无法确定第二种情况-因为，在查询更改react-query之后，正在从useQuery获取新结果和数据，结果是空的，我得到默认空数组，在这种情况下，将福尔斯条件if (isLoading && !data.length )
const { isLoading, error, data=[] } = useQuery(["list", query], () =>
fetch(`https://api/list/${query}`)
);
if (isLoading && !data.length ) return <p>Loading...</p>;
return <div>
{data.map((item) => <ListItem key={item.id} item={item}/>
{isLoading && <Spinner/>}
</div>
3条答案
按热度按时间bzzcjhmw1#
当没有缓存时（第一次查询获取或垃圾收集器5分钟后），isLoading从true切换为false（并且status ===“loading”）。
但是当你已经缓存了数据并重新获取（或者在其他组件中使用查询）时，useQuery应该返回以前缓存的数据并在后台重新获取。在这种情况下，isLoading总是false，但是你有属性“isFetching”可以从true切换到false。
在您的示例中，如果数组中传递的变量“query”在调用之间不同，则没有结果是正常的，该高速缓存键是使用数组中的所有变量构建的。
在这种情况下，缓存不会共享，因为“query”在每个useQuery上都不同
3pmvbmvn2#
您可以在每次提取新数据时使用isisFetching
crcmnpdw3#
此代码的问题是，在尝试Map数据数组之前，它没有检查数据数组是否为空。如果数据数组为空，此代码将引发错误。若要解决此问题，代码应在尝试Map数据数组之前检查数据数组是否为空。