@Ily4farmer

Почему React начал выводить ошибку Cannot read property 'map' of undefined?

Захотел сделать приложение "фильмы". Нашел бесплатный api, вот он https://yts.mx/api/v2/list_movies.json
В компоненте хотел вывести жанры фильма. Для этого использовал map, сначала все прекрасно работало, React вообще не ругался. Но запустив сегодня код, то увидел, что он перестал работать.
вот код компонента
import React from 'react';
import "./MovieItem.css"

export default function MovieItem({id, title, genres, year, summary, poster}) {
    console.log(genres);
    return(
        <div className="movie__item">
            <img src={poster} className="movie__img" alt={title} title={title}/> 
            <div className="movie__column">
                <h3 className="movie__title">{title}</h3>
                <h5 className="movie__year">Год выхода: {year}</h5>
                <ul className="movie__genres">
                    {genres.map((el, index) => {
                        return <li key={index} className="movie__genres-item">{el}</li>
                    })}
                </ul>
                <p className="movie__summary">Описание: <br/>{summary.slice(0, 150)}...</p>
            </div>
        </div>
        
    );
}

Вот как получал get запрос
import React, { Component } from 'react';
import Movies from "./components/Movies/Movies";
import axios from "axios";
import "./App.css";


export default class App extends Component {

  state = {
    isLoading: true,
    movies: []
  }

  getMovies = async () => {
    const {data: {data: {movies}}} = await axios.get('https://yts.mx/api/v2/list_movies.json');
    this.setState({
      movies: movies,
      isLoading: false
    })
  }

  componentDidMount() {
    this.getMovies();
  }

  render() {
    const {isLoading, movies} = this.state;

    return (
      <section className="container">
          {isLoading ? 
          <div className="loader">
            <span>Загрузка...</span>
          </div>
          : <Movies movies={movies}/>
          } 
      </section>
    );
  }
}

А вот код компонента movie, где выводятся карточки со всеми фильмами
import React from 'react';
import MovieItem from "../MovieItem/MovieItem";
import "./Movies.css";

export default function Movies({movies}) {
    console.log(movies);
    return(

        <div className="movie">
            {movies.map(el => {
               return(
                <MovieItem 
                key={el.id} 
                id={el.id} 
                title={el.title} 
                genres={el.genres}
                year={el.year} 
                summary={el.summary} 
                poster={el.medium_cover_image}
                />
               )
            })}
        </div>
    );
}

По какой причине мой код перестал работать? И как исправить?
  • Вопрос задан
  • 80 просмотров
Решения вопроса 2
alexey-m-ukolov
@alexey-m-ukolov Куратор тега React
genres={el.genres || []}
Ответ написан
Комментировать
NevermindMe
@NevermindMe
Junior?
genres?. map((item, id) => .......) or { genres && ( genres.map(....) ) }
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы