【发布时间】：2020-09-16 17:28:54
【问题描述】：
更新
我正在学习反应，所以使用 omdbapi api 想要获取数据但得到 TypeError: Cannot read property 'map' of undefined
请帮忙解决这个问题
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>
)
}
}
【问题讨论】：
-
你的
findresponse.movie是什么样的？ -
是的，检查
findresponse.movie的对象形状以确保它是一个可以被映射 的数组。另外，请记住为每个映射元素提供一个唯一的反应键。