0

Хочу зарендерить карточку фильма, но консоль ругается Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'map')

import axios from "axios";

const IMG_URL = 'https://image.tmdb.org/t/p/w500';

const axiosPopular = axios.get('https://api.themoviedb.org/3/trending/movie/day', {
    params: {
        api_key: '7074c4672eaf06c100035e388f3425d1',
        page: 1
    }
}).then(res => res).catch(error => console.log(error));

const movieContainer = document.querySelector('.movie__inner');

getMovie();

function getMovie() {
    movieContainer.innerHTML = '';
    axiosPopular.then(data => {
        renderCard(data.results);
    });
}

function renderCard(movies) {
    const markup = movies.map(movie => {
        const { poster_path, title,genre_ids,release_date } = movie;
        return `
            <div class="movie__card">
            <img class="movie__img" src="${IMG_URL+poster_path}" alt="img" />
            <div class="movie__info">
              <h3 class="movie__name">${title}</h3>
              <div class="movie__details">
                <p class="movie__genre">${genre_ids}</p>
                <p class="movie__year">${release_date.slice(0, 4)}</p>
              </div>
            </div>
          </div>
        `;
    }).join('');

    movieContainer.insertAdjacentHTML('beforeend', markup);
}
1
  • Скорее всего на момент вызова getMovie() get запрос еще не завершен. Обрабатывайте в промисе. Или через async/await. Можете сам запрос переместить в функцию getMovie() и там уже в then renderCard вызывать. Ну или getMovie вообще лишняя, сразу renderCard в axios вызывайте ) 18 июл 2022 в 21:12

1 ответ 1

0

Это из-за асинхронного метода в axios get.

Код с похожей логикой:

new Promise((resolve)=>{
  resolve(1)
}).then((res)=>{
  console.log(res)
})

console.log(2)

Заметьте, что в этом случае сначала в консоль выводится 2, а только потом 1. Также и в вашем коде. Я знаю два способа разрешения этой проблемы.

1 Способ поместить все следующие функции в then:

new Promise((resolve)=>{
  resolve(1)
}).then((res)=>{
  console.log(res);
  ///Код
  console.log(2)
})

2 Способ создать асинхронную функцию и вызывать промисы через await:

async function start(){

  const first = await new Promise((resolve)=>{
    resolve(1)
  })
  console.log(first)
  console.log(2)
}
start()

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.