小编Kuz*_*lav的帖子

在新项目中使用 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>