时间戳

首页 > 解决方案 > 映射数组中的项目 - 反应

reactjs - 映射数组中的项目 - 反应

问题描述

我有一个像这样的对象：

    {
      "id": 1,
      "name": "car",
      "colors": ["white", "black"]
    }

我将我的对象放入data使用 useState。
当我尝试data.name结果是“汽车”
当我尝试data.colors结果是“whiteblack”
但是当我尝试使用以下颜色映射颜色时：

{data.colors.map((color, i) =>
  <span key={i} >{color}</span>
)}

我会得到TypeError: Cannot read property 'map' of undefined
我错过了什么？

标签： reactjs

解决方案

一个可能的原因是您尝试在加载数据之前映射数据。例如，如果您在加载组件时启动对某些资源的 fetch 调用，但同时映射返回的对象。在这种情况下，数据将是未定义的。

一个简单的解决方法是在映射数据之前检查数据是否未定义。

{data && data.colors.map((color, i) =>
  <span key={i} >{color}</span>
)}

推荐阅读