在React

时间:2017-03-29 13:51:15

标签: api reactjs axios

"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响应中的关键项,以便setState但我不能。

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>)
}   
}

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

2 个答案:

答案 0 :(得分:0)

结果数组只包含一个项目,因此您需要使用索引// IEnumerable<string> searchResult = ... this is your search statement string result = String.Join(" / ", searchResult); 而不是0。另一件事6位于items内,因此首先访问comics然后访问comics,请使用此代码:

items

运行此代码段:

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

答案 1 :(得分:0)

items中存在的

comics不是结果数组中的6th项,而是结果数组的6th中的first object项,因此你需要像访问它一样。

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});
    })
}