FourSquare Axios请求- ReactJs -无法读取未定义的属性'map‘
FourSquare Axios请求- ReactJs -无法读取未定义的属性'map‘
提问于 2018-06-05 02:48:57
请帮助:)
我正在做一个简单的Axios get请求，在一个"Component Did Mount“中。在一个简单/基本的react应用程序中。我在试着获取伦敦的FourSquare place数据。
我的函数可以工作，就像我可以console.log数据一样。下面是我的组件的挂载代码：
// FOURSQUARE COMPONENT DID MOUNT
componentDidMount() {
console.log('COMPONENT DID MOUNT');
axios.get('https://api.foursquare.com/v2/venues/explore…')
.then(res => {
console.log('data', res.data.response.groups[0].items);
// console.log('data',res.data.response.groups[0].items[0].venue.name);
this.setState(
{ places: res.data.response.groups[0].items}
);
});
}请在这里附上console.log的截图。https://i.imgur.com/DPPxwdW.png
然而，我试图映射整个数据，以获得对象数组/venue.name中的“res.data”。但我一直收到以下错误：
无法读取未定义的属性'map‘
这就是我试图映射数据的方式……
const Loaders = ({places}) => {
return (
<section>
<div className="columns is-multiline">
{places.map((place, i) => <div className="column is-one-quarter" key={i}>
<ul>
<li>
<div className="card-image">
<figure className="image">
<h2 className="has-text-centered has-text-grey">title: {place.venue.name}</h2>
</figure>
</div>
</li>
</ul>
</div>)}
</div>
</section>
);
};
export default Loaders;回答 2
Stack Overflow用户
回答已采纳
发布于 2018-06-05 03:47:13
发生这种情况的原因是，请求是异步的，并且在获得响应之后，位置状态被设置。所以最初，places是未定义的。您可以在正在加载状态下呈现加载指示器
const Loaders = ({places}) => { if(!places){ return Loaders...}
return (
<section>
<div className="columns is-multiline">
{places.map((place, i) => <div className="column is-one-quarter" key={i}>
<ul>
<li>
<div className="card-image">
<figure className="image">
<h2 className="has-text-centered has-text-grey">title: {place.venue.name}</h2>
</figure>
</div>
</li>
</ul>
</div>)}
</div>
</section>)；}；
或者在构造函数中将位置初始化为空数组
constructor(props) {
this.state = {
places = []
}
}Stack Overflow用户
发布于 2018-06-05 03:52:58
问题是this.state.places在某些时候是未定义的。问题可能是初始状态在开始时没有设置为空数组，或者逻辑中的某些东西更改了places的值。试着
class Foo extends React.Component {
state = {
places: []
}
render() {
return <Loaders places={this.state.places} />>
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50686980
复制相关文章
相似问题
腾讯云开发者
