ReactJS - Erro: TypeError: Cannot read properties of undefined
Opa galera, tudo blz? Recentemente comecei a estudar reactjs e para praticar estou fazendo o clone da Netiflix. Mas estou com um erro ao tentar chamar as imagens da API do TMDB o erro é:
TypeError: Cannot read properties of undefined (reading 'results')
Já tentei refazer o código varias vezes mas não consegui resolver o problema. Vou postar o resto do código aqui
App.js:
import React, {useEffect, useState} from 'react';
import Tmdb from './Tmdb';
import MovieRow from './components/MovieRow';
const App = () =>{
const [movieList, setMovieList] = useState([]);
useEffect(()=>{
const loaddAll = async () =>{
let list = await Tmdb.getHomeList();
setMovieList(list)
}
loaddAll();
}, []);
return(
<div className="page">
<section className="lists">
{movieList.map((item, key)=>(
<MovieRow key={key} title={item.title} items={item.items}/>
))}
</section>
</div>
);
}
export default App;
Consumir a api:
Tmdb.js:
const API_KEY = '******************************';
const API_BASE = 'https://api.themoviedb.org/3';
const basicFetch = async (endpoint) =>{
const req = await fetch(`${API_BASE}${endpoint}`)
const json = await req.json();
return json;
}
export default {
getHomeList: async () =>{
return [
{
slug: 'originals',
title: 'Originais da Netflix',
items: await basicFetch(`/discover/tv?with_networks=213&language=pt-BR&api_key=${API_KEY}`)
},
{
slug: 'trending',
title: 'Recomendados para você',
item: await basicFetch(`/trending/all/week?language=pt-BR&api_key=${API_KEY}`)
},
{
slug: 'toprated',
title: 'Em alta',
item: await basicFetch(`/movie/top_rated?language=pt-BR&api_key=${API_KEY}`)
},
{
slug: 'action',
title: 'Ação',
item: await basicFetch(`/discover/movie?width_genres=28&language-pt-BR&api_key=${API_KEY}`)
},
{
slug: 'comedy',
title: 'Comédia',
item: await basicFetch(`/discover/movie?width_genres=35&language-pt-BR&api_key=${API_KEY}`)
},
{
slug: 'horror',
title: 'Terror',
item: await basicFetch(`/discover/movie?width_genres=27&language-pt-BR&api_key=${API_KEY}`)
},
{
slug: 'romance',
title: 'Romance',
item: await basicFetch(`/discover/movie?width_genres=10749&language-pt-BR&api_key=${API_KEY}`)
},
{
slug: 'documentary',
title: 'Documentários',
item: await basicFetch(`/discover/movie?width_genres=99&language-pt-BR&api_key=${API_KEY}`)
},
]
}
}
Componente para mostrar os filmes:
MovieRow.js:
import React from "react";
import './MovieRow.css';
export default ({title, items}) =>{
return (
<div>
<h2>{title}</h2>
<div className="moviewRow--listarea">
{items.results.length > 0 && items.results.map((key, item)=>(
<img src={`https://image.tmdb.org/t/p/w300${item.poster_path}`} />
))}
</div>
</div>
);
}
Se alguém pudesse me ajudar eu ficaria muito grato.Discussão (0)
Carregando comentários...