反应：无法读取未定义的属性“地图”答案

【问题标题】：React: Cannot read property 'map' of undefined反应：无法读取未定义的属性“地图”
【发布时间】：2019-07-11 17:27:53
【问题描述】：

代码是here。

我想做的事：

尝试在使用 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;

【问题讨论】：

Movie.defaultProps = { movies: [] };
你为什么不编写测试来找出问题所在，你可以传入不同类型的道具，看看你的组件在每种情况下的表现如何？
如何渲染这个组件？

标签： javascript reactjs axios

【解决方案1】：

最有可能发生的是您的 render 函数在 api 调用有时间完成之前运行，因此 props.movies 在 render 需要它的时候是 undefined。你可以做的是给props.movies一个默认值一个空数组[] 或者您可以先检查props.movies 是否在映射之前通过props.movies && props.movies.map 定义。

【讨论】：

【解决方案2】：

访问电影对象时添加检查props.movies && props.movies.map(movie=>

【讨论】：

const Movie = props => {
用于语句块