Javascript TypeError: Cannot read property 'results' of undefined

[Thesalos]

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>
  );
}

 

[Rui Guilherme]

@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.

 

[Thesalos]

@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?

[Rui Guilherme]

@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.

 

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}`}/>
}}