访问 React 中映射的对象数组中的数据答案

【问题标题】：Accessing data in an array of object for a map in React访问 React 中映射的对象数组中的数据
【发布时间】：2017-08-23 01:22:26
【问题描述】：

"data": {
 "offset": 0,
 "limit": 20,
 "total": 1,
 "count": 1,
 "results": [
   {
    "id": 1009144,
    "name": "A.I.M.",
    "modified": "2013-10-17T14:41:30-0400",
    "thumbnail": {
      "path": "i.annihil.us/u/prod/marvel/i/mg/6/20/52602f21f29ec",
      "extension": "jpg"
    },
    "resourceURI": "gateway.marvel.com/v1/public/characters/1009144",
    "comics": {
      "available": 33,
      "collectionURI": "gateway.marvel.com/v1/public/characters/1009144/comics",
      "items": [
        {
          "resourceURI": "gateway.marvel.com/v1/public/comics/36763",
          "name": "Ant-Man & the Wasp (2010) #3"
        },
        {
          "resourceURI": "gateway.marvel.com/v1/public/comics/17553",
          "name": "Avengers (1998) #67"
        }
     ]
   }
  }
]
}

我正在使用 axios 从 React 组件中的 api 获取数据。我想访问我的 json 响应中的关键项以设置状态，但我不能。

export default class Hero extends React.Component {
constructor(props) {
super(props);
this.state = {
    details : [],
    comics :[]
};
}
componentDidMount() {
    axios.get(infoUrl).then((res) => {
    this.setState({details : res.data.data.results,
                    comics : res.data.data.results.results[6].items});
})
}
render() {  

     (<div>
      </div>)
}   
}

我可以访问我的状态详细信息，但不能访问漫画。

【问题讨论】：

标签： api reactjs axios

【解决方案1】：

items 出现在comics 中不是结果数组中的6th 项，而是结果数组的first object 中的6th 项，因此您需要像访问它一样。

res.data.data.results[0].comics.items

把你的componentDidMount函数改成

componentDidMount() {
    axios.get(infoUrl).then((res) => {
    this.setState({details : res.data.data.results,
                    comics : res.data.data.results[0].items});
    })
}

【讨论】：

【解决方案2】：

结果数组只包含一项，因此您需要使用索引0 而不是6。另一件事是items存在于comics中，所以首先访问comics然后访问items，使用这个：

componentDidMount() {
    axios.get(infoUrl).then((res) => {
    this.setState({
            details : res.data.data.results,
            comics : res.data.data.results[0].comics.items});
     })
}

运行这个 sn-p：

let data = {"data": {
 "offset": 0,
 "limit": 20,
 "total": 1,
 "count": 1,
 "results": [
   {
    "id": 1009144,
    "name": "A.I.M.",
    "modified": "2013-10-17T14:41:30-0400",
    "thumbnail": {
      "path": "i.annihil.us/u/prod/marvel/i/mg/6/20/52602f21f29ec",
      "extension": "jpg"
    },
    "resourceURI": "gateway.marvel.com/v1/public/characters/1009144",
    "comics": {
      "available": 33,
      "collectionURI": "gateway.marvel.com/v1/public/characters/1009144/comics",
      "items": [
        {
          "resourceURI": "gateway.marvel.com/v1/public/comics/36763",
          "name": "Ant-Man & the Wasp (2010) #3"
        },
        {
          "resourceURI": "gateway.marvel.com/v1/public/comics/17553",
          "name": "Avengers (1998) #67"
        }
     ]
   }
  }
 ]
 }
}
console.log('items', data.data.results[0].comics.items)

【讨论】：