[英]React: Cannot read property 'map' of undefined
What I'm trying to do: 我正在尝试做的是:
Trying to have the list of movies display, when fetched with Axios, to the area on the right of the app. 当使用Axios提取时,尝试将电影列表显示在应用程序右侧的区域。
I'm not sure if this is a passing prop issue, or if it's something else. 我不确定这是否是一个通过的道具问题,还是其他原因。 Any hints as to what's going on?
有什么提示吗?
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;
What's most likely happening is your render
function is running before the api call has had time to complete, thus props.movies
is undefined
at the time when render
needs it. 最有可能发生的事情是您的
render
函数在api调用有时间完成之前就已运行,因此在render
需要它时props.movies
是undefined
的。 What you can do is either give props.movies
a default value of an empty array []
or you can first check to see if props.movies
is defined before mapping by doing props.movies && props.movies.map
. 您可以做的是给
props.movies
一个空数组[]
的默认值,或者您可以先通过执行props.movies && props.movies.map
来检查是否在定义props.movies
之前进行了映射。
访问电影对象时,添加检查props.movies && props.movies.map(movie=>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.