为什么我的地图功能无法在浏览器上显示 API 数据？答案

【问题标题】：why my map function is not working to display API data on browser?为什么我的地图功能无法在浏览器上显示 API 数据？
【发布时间】：2021-06-25 03:07:41
【问题描述】：

我正在控制台中获取数据，但无法找到正确的路径来映射嵌套映射函数中的数据。我想要数组中每个产品的图像组件。

I am trying this path to map over object given below in picture.
This is the query having async function that fetched the data.

   const res = useCategoriesQuery({
     type: query.type,
     text: query?.text,
     category: query?.category,
      });
     console.log(res);

我得到的错误是 -

【问题讨论】：

why-not-upload-images-of-code-errors-when-asking-a-question
category: query?.category - 这里的 nullsafe 运算符可能很好地表明 category 可能并不总是一个数组。如果是这种情况，您需要考虑这一点并在尝试对其使用数组方法之前检查其值。关于这个错误有数百个关于 SO 的问题，我相信你可以让他们的答案之一适用于你的情况。

标签： reactjs function next.js fetch-api react-query

【解决方案1】：

你必须映射到data:

res.data?.categories.data.map()

【讨论】：

data 上的 null 安全运算符非常无用，因为如果它为 null，它将在到达 map 之前中断。