Реакция: Не удается прочитать свойство 'карта' из неопределенного

Question

Код здесь .

Что я пытаюсь сделать:

Попытка отображения списка фильмов при получениис 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;

Answer 1

Скорее всего, ваша функция render работает до того, как вызов API успел завершиться, поэтому props.movies равен undefined в тот момент, когда render это необходимо.Что вы можете сделать, это либо присвоить props.movies значение по умолчанию для пустого массива [], либо вы можете сначала проверить, определено ли props.movies перед отображением, выполнив props.movies && props.movies.map.

Answer 2

При доступе к объектам фильмов добавьте проверку props.movies && props.movies.map(movie=>