javascript - 反应:无法读取未定义的属性“地图”
问题描述
代码在这里。
我正在尝试做的事情:
尝试在使用 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 调用有时间完成之前运行,因此props.movies
是undefined
在render
需要它的时候。您可以做的是给props.movies
一个空数组的默认值,[]
或者您可以先检查是否props.movies
在映射之前通过doing 定义props.movies && props.movies.map
。
推荐阅读
- c - how to copy C.int address into C.char in cgo?
- php - RewriteRule 不会产生预期的替换
- flutter - 将返回未来的函数传递给小部件
- python-ldap - 在 python-ldap 中关闭搜索继续结果?
- javascript - 如何在 wavesurfer.js 中选择直线区域?
- r - 文件中的错误(文件,“rt”):无法打开连接另外:警告消息:在文件(文件,“rt”)中:无法打开文件
- sql - Left Join with an Inner Join - 似乎无法获得正确的语法
- typescript - 为什么不在 CORS 模式下 fetch 发送 ORIGIN 标头?
- javascript - 每次我的 JavaScript 文件从其中提取代码时,如何使变量“刷新”自身?
- javascript - Nodejs保存数据离线地址正在使用中