[英]React: Cannot read property 'map' of undefined
代码在这里 。
我正在尝试做的是:
当使用Axios提取时,尝试将电影列表显示在应用程序右侧的区域。
我不确定这是否是一个通过的道具问题,还是其他原因。 有什么提示吗?
import React from "react";
import Card from "@material-ui/core/Card";
import Grid from "@material-ui/core/Grid";
import "../Movie/_movie.scss";
const Movie = props => {
return (
<div>
<Grid container>
<Grid item xs={12} md={12}>
<Card>
<h3>Movies should show up here</h3>
<ul>
{props.movies.map(movie => (
<li key={movie.id}>
<img
src={`https://image.tmdb.org/t/p/w185/${movie.poster_path}`}
/>
<h3>{movie.original_title}</h3>
<p>Date: {movie.release_date}</p>{" "}
<p>Rating: {movie.vote_average}/10</p>
<p>{movie.overview}</p>
</li>
))}
</ul>
</Card>
</Grid>
</Grid>
</div>
);
};
export default Movie;
最有可能发生的事情是您的render
函数在api调用有时间完成之前就已运行,因此在render
需要它时props.movies
是undefined
的。 您可以做的是给props.movies
一个空数组[]
的默认值,或者您可以先通过执行props.movies && props.movies.map
来检查是否在定义props.movies
之前进行了映射。
访问电影对象时,添加检查props.movies && props.movies.map(movie=>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.