map:无法读取未定义的属性“映射”
map:无法读取未定义的属性“映射”
提问于 2020-05-29 07:39:08
更新的
我正在学习如何使用omdbapi来获取数据，但是获取TypeError:无法读取未定义的属性“map”
请帮助解决这个问题。
class App extends React.Component {
constructor(){
super()
this.state={
data:[],
}
}
componentDidMount(){
fetch('http://www.omdbapi.com/?i=tt3896198&apikey=key123')
.then((Response)=>Response.json())
.then((findresponse)=>
{
this.setState({
data:findresponse.movie
})
})
}
render() {
return (
<div>
{this.state.data.map((dynamicData)=>
<div>
<img src={dynamicData.Poster} alt=""/>
<p>{dynamicData.title} </p>
<p>{dynamicData.Released} </p>
</div>
)}
</div>
)
}
}在下面的答案之后，我已经更新了源代码，现在html输出是空的，但是在console.log中显示输出
我想转圈20部电影
componentDidMount(){
fetch('http://www.omdbapi.com/?apikey=mykey&s=batman')
.then((Response)=>Response.json())
.then((findresponse)=>
{
console.log(findresponse)
this.setState({
data:[findresponse]
})
})
}
render() {
return (
<div>
{this.state.data && this.state.data.map((dynamicData , key)=>
<div key={key}>
<img src={dynamicData.Poster} alt=""/>
<p>{dynamicData.Title} </p>
<p>{dynamicData.Released} </p>
</div>
)}
</div>
)
}
}回答 2
Stack Overflow用户
回答已采纳
发布于 2020-05-29 07:46:06
发行:
根据api，它只返回一个电影对象，而且它也没有movie键，所以您不能通过map --它应该是数组--通过json object。
// response is taken from http://www.omdbapi.com/?i=tt3896198
{
"Title": "Guardians of the Galaxy Vol. 2",
"Year": "2017",
"Rated": "PG-13",
"Released": "05 May 2017",
"Runtime": "136 min",
"Genre": "Action, Adventure, Comedy, Sci-Fi",
"Director": "James Gunn",
"Writer": "James Gunn, Dan Abnett (based on the Marvel comics by), Andy Lanning (based on the Marvel comics by), Steve Englehart (Star-Lord created by), Steve Gan (Star-Lord created by), Jim Starlin (Gamora and Drax created by), Stan Lee (Groot created by), Larry Lieber (Groot created by), Jack Kirby (Groot created by), Bill Mantlo (Rocket Raccoon created by), Keith Giffen (Rocket Raccoon created by), Steve Gerber (Howard the Duck created by), Val Mayerik (Howard the Duck created by)",
"Actors": "Chris Pratt, Zoe Saldana, Dave Bautista, Vin Diesel",
"Plot": "The Guardians struggle to keep together as a team while dealing with their personal family issues, notably Star-Lord's encounter with his father the ambitious celestial being Ego.",
"Language": "English",
"Country": "USA",
"Awards": "Nominated for 1 Oscar. Another 15 wins & 56 nominations.",
"Poster": "https://m.media-amazon.com/images/M/MV5BNjM0NTc0NzItM2FlYS00YzEwLWE0YmUtNTA2ZWIzODc2OTgxXkEyXkFqcGdeQXVyNTgwNzIyNzg@._V1_SX300.jpg",
"Ratings": [
{
"Source": "Internet Movie Database",
"Value": "7.6/10"
},
{
"Source": "Rotten Tomatoes",
"Value": "85%"
},
{
"Source": "Metacritic",
"Value": "67/100"
}
],
"Metascore": "67",
"imdbRating": "7.6",
"imdbVotes": "537,920",
"imdbID": "tt3896198",
"Type": "movie",
"DVD": "22 Aug 2017",
"BoxOffice": "$389,804,217",
"Production": "Walt Disney Pictures",
"Website": "N/A",
"Response": "True"
}解决方案:
For :来自http://www.omdbapi.com/?i=tt3896198
// as there is no `movie` key change `findresponse.movie` to `findresponse`
// if you want to use it as array for only one object
this.setState({
data:[findresponse]
// OR
data : [...this.state.data , findresponse] // <--- If you want pushing result with previous
})
// suggested
this.setState({
data : findresponse
})For：http://www.omdbapi.com/?apikey=YOUR_KEY&s=Batman，您可以使用下面的
this.setState({
data : findresponse.Search
})Stack Overflow用户
发布于 2020-05-29 07:49:57
首先尝试检查数据是否未定义：
{this.state.data && this.state.data.map((dynamicData)=>
<div>
<img src={dynamicData.Poster} alt=""/>
<p>{dynamicData.title} </p>
<p>{dynamicData.Released} </p>
</div>
)}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62080966
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号