在 react-query 中使用（isLoading 或 isFetching）的原因答案

【问题标题】：Reasons for using (isLoading or isFetching) in react-query在 react-query 中使用（isLoading 或 isFetching）的原因
【发布时间】：2023-02-10 00:45:42
【问题描述】：

我是一个使用 React 的用户。我在使用react-query的时候没有用好isloading函数。在 ui 方面，我认为 loading 用于向用户显示加载屏幕。我以为我不必显示加载，因为数据获取速度很快。

但是突然间，我想到了这个想法。

如果把 props 交给子组件，数据通过 'undefined' 获取 fetch 后，往往会渲染 fetch 数据，所以我想可能是优化渲染的原因，还是有其他原因？

【问题讨论】：

标签： reactjs react-query

【解决方案1】：

我想你用其中的一些击中了头部。

有一小段时间您的数据未定义，这意味着您的某些代码可能会中断。

一个非常简单的例子

const MyComponent = () => {
  const { data, loading } = useQuery(..)

  if (loading) return <LoadingComponent />

  return (<table> { data.map((item) => <tr>{item.name}</tr>)} </table>)
}

如果数据未定义，则 data.map 将中断。但是，您要指出的是，您可以只检查数据是否存在。

if (!data) return <LoadingComponent/>

但！如果您的查询出错，那么数据将是未定义的，并且当您真的应该抛出错误消息时，您将永远陷入加载状态。

所以你也可以利用错误道具来解决这个问题

  const { data, error } = useQuery(..)

  if !(data || error) return <LoadingComponent />

现在你没有那么多用于加载，除非你想让你的用户知道你的数据正在后台更新，如果你已经有缓存数据。

例如，假设您已经调用了查询，并且 reactquery 立即使用缓存填充数据，但它会进行后台检查以确保缓存数据是最新的，然后您可以使用加载道具来显示一个小微调器您的数据正在同步！

【讨论】：