useQuery() 挂钩中的数据属性 returns 无法读取未定义的属性

Question

这是一个非常令人费解的问题。下面的代码给出了这个错误：

TypeError: Cannot read properties of undefined (reading 'map')

用console.log()看res.data的时候还好，有数据。 res.data.products 未定义，因此炸毁了 .map()。为什么这不起作用只是没有意义。开始觉得react-query库有bug

export default function ProductList() {
  const { data: products, isLoading } = useQuery('Products', () => 
    axios('/api/products').then((res) => res.data.products)
  );

  if (isLoading) return <LoadingSpinner />

  return products.map((product) => (
    <ProductItem key={product.id} product={product} /> 
  ));
}

Answer 1

从 useQuery 编辑的数据 return 的类型为 undefined | T。这意味着它可以是未定义的，也可以是您期望的形状。这是因为，当您第一次获取数据时，您的缓存中没有它，所以您必须获取它，通常是通过 HTTP 请求。因为此数据有可能 undefined，所以您必须防止未定义的情况。

return (products?.map(..

如果您将代码更新为上述代码，它首先会检查产品是否已定义。如果尚未定义，它将向地图函数提供一个空数组。因为没有什么可以映射 return 语句是一个空数组。

此外，如果您在 useQuery 调用之后立即放置控制台日志语句，您应该注意到它首先使用 undefined，只有在请求被解析后数据才会开始流动。

就是说，有一种情况 isLoading 是错误的，但数据是“未定义的”，因为它永远无法自行解析。

这样想：

加载时我们应该显示什么
数据准备好后我们应该显示什么
当我们不再加载并且数据失败时，我们应该显示什么returned

useQuery() 挂钩中的数据属性 returns 无法读取未定义的属性

data property in useQuery() hook returns Cannot read properties of undefined

javascript

node.js

reactjs

react-query

useQuery() 挂钩中的数据 属性 returns 无法读取未定义的属性

data property in useQuery() hook returns Cannot read properties of undefined

javascript

node.js

reactjs

react-query

useQuery() 挂钩中的数据属性 returns 无法读取未定义的属性