时间戳

首页 > 解决方案 > 从 api pull 映射后无法访问数组中的数据

javascript - 从 api pull 映射后无法访问数组中的数据

问题描述

因此，我在 React 应用程序中使用 fetch 从 api 中提取了一些数据，然后我使用 .map 将我想要的数据获取到我试图以表格格式呈现的数组中。

当我记录映射数组时，它会呈现我所追求的数据，但是当我尝试访问它以呈现它的特定元素时，它会返回未定义的数据。

如果控制台日志中的数组显示它具有元素名称和年龄，那么当我尝试访问它时，我是否做错了未定义的事情？或者，也许我以错误的方式访问它。任何帮助，将不胜感激。

function getMap(results) {
   return results.map((res) => {
       return {name: res.name, age: res.age}
}

fetch(URL)
   .then(result) {
       let x = getMap(result.result);
       console.log(x);

///// the console log shows an array [{name: 'Peter', age: 30}]

      console.log(x.name);

///// console log returns undefined
})

标签： javascriptarraysreactjsapi

解决方案

您没有正确访问数组。请记住，数组就像是事物的“列表”，在这种情况下是对象。每个对象都有两个属性，名称和年龄。您尝试在第二个 console.log 中访问它的方式是尝试访问阵列本身的 .name 属性。这是非常基本的，但是要访问数组中的项目，您需要传递一个索引（从零开始），如下所示myArray[0]：因此，要访问数组中第一项的 name 属性，您可以使用x[0].name. 要遍历整个数组，您可以这样做x.forEach(item => console.log(item.name))

推荐阅读