Ir ao conteúdo
  • Cadastre-se

Javascript TypeError: Cannot read property 'results' of undefined


Posts recomendados

Estou desenvolvendo uma aplicação com ReactJS para aprender, mas estou obtendo o seguinte erro no código:

Uncaught TypeError: Cannot read property 'results' of undefined

A aplicação usa API do TMDB.

 

MovieRow.js

import React from 'react';
import './MovieRow.css';

export default ({title, items}) => {

    return(

        <div>
            <h2>{title}</h2>
            <div className='movieRow--listarea'>
                {items.results.length > 0 && items.results.map((item, key)=> (
                    <img src={`https://image.tmdb.org/t/p/w300${item.poster_path}`}/>
                ))}
            </div>
        </div>
    );
}

 

App.js

import React, { useEffect, useState } from 'react';
import Tmdb from './Tmdb';
import MovieRow from './components/MovieRow';

export default () => {
  const [movieList, setMovieList] = useState([]);

  useEffect(() => {
    const loadAll = async () => {

      //Pegando a lista total
      let list = await Tmdb.getHomeList();
      setMovieList(list);
    }

    loadAll();
  }, []);

  return (
    <div className='page'>
      <section className='lists'>
        {movieList.map((item, key)=>(
          <MovieRow key={key} title={item.title} items={item.items}/>
        ))}
      </section>
    </div>
  );
}

 

Link para o post
Compartilhar em outros sites

@Thesalos Seria legal também mandar o:

import Tmdb from './Tmdb';

 

Mas desconsiderando isso, acredito que o Tmdb seja apenas uma array-objeto com o título, imagem e id, certo? Vou considerar que seja.

 

o "results" era para ser uma array com o path das imagens para você carregar no <img> então o problema provavelmente está no Tmdb.js já que é lá onde é feito o "results" e essa array não está definida, mas antes de continuar... Cada titulo é para ter mais de uma imagem?

 

Eu refiz essa parte da imagem considerando apenas uma, então eu apenas removi o useEffect e o useState, segue o resultado:
https://codesandbox.io/s/green-brook-dnkfh caso a página não carregue ao lado direto do codesandbox(o Firefox normalmente bloqueia iframe) acesse por aqui https://dnkfh.csb.app/

 

A única diferença para o seu código é que items não é uma array, fiz isso para simplificar as coisas já que no Tmdb carrega apenas uma única imagem.

 

  • Curtir 1
Link para o post
Compartilhar em outros sites

@Rui Guilherme Sim, cada titulo tem mais de uma imagem, seria no caso o gênero do filme, depois de muito observar o código notei um erro bobo meu de escrita no meu arquivo .json, estava chamando items.result e no json estava como "itens", acho q por isso o results estava como indefinido. Muito obrigado pela ajuda, você super simplificou o código, vou dar uma estudada nele e tentar montar o mesmo com varias imagens em cada titulo. Aproveitando o tópico, estou a receber muitos erros do eslint com arrow-function e unused-var, tem alguma maneira de desativar isso, sem ter q ficar colocando o // eslint-disable-next-line?

Link para o post
Compartilhar em outros sites

@Thesalos  Disponha. Para carregar mais de uma imagem basta fazer como você estava fazendo no <img /> e rodar ele no map(Lembra-se não usar a key do map para identificar a imagem), porém tendo certeza que o item tá vindo mesmo. :D

 

Vou deixar a forma como eu faria:

// Você pode extrair antes de rodar no map e evitar erros de variaveis não definidas. 
const { results } = items 
//results == [
//    {
//        id: 0,
//        poster_path: '/path_imagem_1.png'
//    },
//    {
//        id: 0,
//        poster_path: '/path_imagem_2.png'
//    },
//    {
//        id: 0,
//        poster_path: '/path_imagem_3.png'
//    },
//]

{results.map((items) => {
  	// nesse exemplo você também pode extrair a id
  	const { poster_path } = items
	return <img src={`htts://image.tmdb.org/t/p/w300${poster_path}`}/>
}}            

 

 

Caso seja uma array simples:

const { results } = items 
//results == ['/path_imagem_1.png', '/path_imagem_2.png', '/path_imagem_3.png']

{results.map((poster_path) => {
	return <img src={`htts://image.tmdb.org/t/p/w300${poster_path}`}/>
}}            

 

  • Curtir 1
Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisa ser um usuário para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...

Aprenda a ler resistores e capacitores

EBOOK GRÁTIS!

CLIQUE AQUI E BAIXE AGORA MESMO!