[英]TypeError: Cannot read property 'map' of undefined React API
我正在尝试构建一个产品页面,其中包含产品列表,其详细信息从外部 API 获取并显示为卡片。 我查看了如何做到这一点,发现这与我想做的类似,但我模仿了这篇文章中的代码React fetch api data to component我收到错误TypeError: Cannot read property 'map' of undefined
产品组成
class Products extends Component {
constructor(props){
super(props);
this.state = {
items: [],
isLoaded: false,
}
};
componentDidMount = () => {
fetch("https://api.themoviedb.org/3/movie/popular?api_key=xxxxxxxx&page=1")
.then(resp => resp.json())
.then(resp => {
this.setState({
isLoaded: true,
items: resp.results
})
console.log(this.state.items)
})};
render() {
var {isLoaded, items} = this.state;
return (
<div>
{items.map(item => (<Card key={item.id} item={item} />))};
</div>
);
}
}
export default Products;
卡片组件
const Card = (props) => {
const { item } = props;
return (
<div className="movie-container">
<img src="https://image.tmdb.org/t/p/w185/{items.poster_path}" alt="NO PHOTO" className="movie-container__img" />
<div className="movie-container__about">
<span className="movie-container__percent">{item.vote_average}</span>
<h2 className="movie-container__title">{item.original_title}</h2>
<p className="movie-container__date">{item.release_date}</p>
<p className="movie-container__text">{item.overview}</p>
<a href="https://www.themoviedb.org/movie/" className="movie-container__more">MORE</a>
</div>
</div>
)
}
export default Card;
似乎如果render()
执行, state.items
可以是 null 或未定义,很可能是由于您的 API 返回的结果,或者您如何处理它返回的结果。
'责备' API 的原因是因为您在构造函数中将items
初始化为[]
,所以最初有一个数组并调用map
将起作用。
要解决这个问题,请检查items
是否有值; 如果没有,则不显示任何内容。 然后检查您是否正确访问 API,也许还可以深入了解 API 以查看它的作用并修复它。
检查isLoaded
也很好,这样您就不会显示数据,除非 API 调用已完成。
render() {
var {isLoaded, items} = this.state;
if (!isLoaded || !items)
return null; // or if you like, show a "Waiting" indicator
return (
<div>
{items.map(item => (<Card key={item.id} item={item} />))};
</div>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.