Ir para conteúdo
Sapinn

ReactJS - Erro: TypeError: Cannot read properties of undefined

Recommended Posts

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro 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

  • Conteúdo Similar

    • Por eiwes
      Eu tenho esse código, mas preciso retornar funções puras em vez de funções mutáveis.
       
      É possível? Talvez usando OOP? Não sei como melhorar isso.
       
      Tentei retornar os valores de cada função, mas não obtive sucesso.
       
      import { AssetStatusType } from '@domain/interfaces/common' import { BothComponentType, ComponentsType, GroupFiltersType, OperationType, OverviewModelType, PendenciesOverviewType, PendenciesType, StructurePendenciesCount, StructureStatusCount } from '../../types' const updateStatusCount = ( statusCount: StructureStatusCount, status: AssetStatusType ) => { statusCount[status] = (statusCount[status] || 0) + 1 } const updatePendenciesCount = ( pendenciesCount: StructurePendenciesCount, key: AssetStatusType, subKey: OperationType | PendenciesOverviewType ) => { pendenciesCount[key] = pendenciesCount[key] ?? {} pendenciesCount[key][subKey] = (pendenciesCount[key]?.[subKey] || 0) + 1 } const processOverviewPendencies = ( pendencies: PendenciesType[] | null | undefined, pendenciesCount: StructurePendenciesCount, countedIds: Set<string>, id: string ) => { if (pendencies?.length) { for (const { state, pendencyType } of pendencies) { const uniqueId = `${state}-${pendencyType}-${id}` if (!countedIds.has(uniqueId)) { updatePendenciesCount(pendenciesCount, state, pendencyType) countedIds.add(uniqueId) } } } } const processOverviewComponents = ( components: ComponentsType[], isGroupByTree: boolean, statusCount: StructureStatusCount, pendenciesCount: StructurePendenciesCount, countedIds: Set<string>, id: string, type: BothComponentType ) => { for (const { pendencies, status, operationType } of components) { if (isGroupByTree && type === 'location') { updateStatusCount(statusCount, status) if (operationType) { updatePendenciesCount(pendenciesCount, status, operationType) } } processOverviewPendencies(pendencies, pendenciesCount, countedIds, id) } } const processOverviewData = ( data: OverviewModelType[], groupBy: GroupFiltersType, statusCount: StructureStatusCount, pendenciesCount: StructurePendenciesCount, countedIds: Set<string> ) => { const isGroupByTree = groupBy === 'tree' const isGroupByAsset = groupBy === 'asset' for (const { id, status, components, operationType, type } of data) { if (isGroupByAsset || type === 'asset') { updateStatusCount(statusCount, status) if (operationType) { updatePendenciesCount(pendenciesCount, status, operationType) } } processOverviewComponents( components, isGroupByTree, statusCount, pendenciesCount, countedIds, id, type ) } } export const calculateOverviewCounts = ( data: OverviewModelType[], groupBy: GroupFiltersType ) => { const statusCount: StructureStatusCount = {} as StructureStatusCount const pendenciesCount: StructurePendenciesCount = {} as StructurePendenciesCount const countedIds = new Set<string>() processOverviewData(data, groupBy, statusCount, pendenciesCount, countedIds) return { ...statusCount, pendencies: pendenciesCount } } Existe uma maneira mais limpa e elegante de fazer isso? Preciso retornar um objeto como este:
      // calculateOverviewCounts return this { pendencies: StructurePendenciesCount; working: number; inAlert: number; warning: number; stopped: number; off: number; } StructurePendenciesCount é:

    • Por Wilherme
      Boa tarde galera, preciso de uma ajuda,
       
      Tenho um gráfico no meu Power Bi porem apresenta o erro abaixo:
       

       
      já habilitei as funções porém ainda com erro.
       
       
      Obrigado.
    • Por 4Unknow
      Bom dia comunidade Imasters.

      Venho aqui tratar de um problema dúvida que estou tendo com um layout que estou tentando usar o formulário php dele.
      Quando clico em enviar ele me enviar para um arquivo .php  (assets/vendor/simple-forms/sendmail.php)

      Ele não envia o e-mail, acredito que deveria aparecer uma mensagem que o contato foi enviado corretamente.
      Vou deixar os arquivos aqui em anexo quem puder me ajudar nessa, ficaria muito grato.
       
      Link Website (wetransfer.com)
    • Por Algorithm
      Olá a todos
       
      Eu estou codificando um exemplo de uso do GraphQL com Nodejs, mas eu estou recebendo um erro de syntax relacionado a [ : ] [ Dois Pontos ], mas eu comparei meu codigo, com o da documentação oficial e esta tudo certo. Será que alguem, conseguiria achar o erro ?
       
      OBS: Esta incluso neste post [ Exemplo Documentação, Meu Exemplo, Mensagem de Erro, Código Completo ]
       
      Exemplo Documentação
      module.exports = /* GraphQL */ ` type Client { id: ID! name: String age: Int products: [Product] } type Query { clients: [Client] client(id: ID!): Client } type Mutation { addClient(name: String!, age: Int!): Client } `  
      Meu Exemplo
      const typeDefs = ` type Pessoa { _id: ID _codigo: Float _nome: String _idade: Int _email: String } input inputPessoa { _codigo: Float _nome: String _idade: Int _email: String } type Query { resposta: String saudacao(nome: String!): String findPessoaOne(codigo: Float): Pessoa findPessoa(input: inputPessoas): [Pessoa] } type Mutation { insertPessoa(input: inputPessoa): Pessoa updatePessoa(codigo: Float, input: inputPessoa) Pessoa deletePessoa(codigo: Float) [Pessoa] } `;  
      Mensagem de Erro
      C:\Users\Core\node\node_modules\graphql\language\parser.js:1413 throw (0, _syntaxError.syntaxError)( ^ GraphQLError: Syntax Error: Expected ":", found Name "Pessoa". at syntaxError (C:\Users\Core\node\node_modules\graphql\error\syntaxError.js:15:10) at Parser.expectToken (C:\Users\Core\node\node_modules\graphql\language\parser.js:1413:40) at Parser.parseFieldDefinition (C:\Users\Core\node\node_modules\graphql\language\parser.js:847:10) at Parser.optionalMany (C:\Users\Core\node\node_modules\graphql\language\parser.js:1510:28) at Parser.parseFieldsDefinition (C:\Users\Core\node\node_modules\graphql\language\parser.js:831:17) at Parser.parseObjectTypeDefinition (C:\Users\Core\node\node_modules\graphql\language\parser.js:803:25) at Parser.parseDefinition (C:\Users\Core\node\node_modules\node_modules\graphql\language\phql\language\parser.js:171:23) at Parser.many (C:\Users\Core\node\node_modules\graphql\language\parser.js:1529:26) at Parser.parseDocument (C:\Users\Core\node\node_modules\graphql\language\parser.js:121:25) at parse (C:\Users\Core\node\node_modules\graphql\language\parser.js:32:17) { path: undefined, locations: [ { line: 26, column: 57 } ], extensions: [Object: null prototype] {} }  
      Codigo Completo
      // Requires const express = require('express'); const GraphQL_HTTP = require('express-graphql'); const { mergeSchemas } = require('@graphql-tools/schema'); // Run // const connect = MongoClient.connect(''); const app = express(); const getCode = () => { return 10 }; // GraphQL Definitions || Query and Mutation const typeDefs = ` type Pessoa { _id: ID _codigo: Float _nome: String _idade: Int _email: String } input inputPessoa { _codigo: Float _nome: String _idade: Int _email: String } type Query { resposta: String saudacao(nome: String!): String findPessoaOne(codigo: Float): Pessoa findPessoa(input: inputPessoas): [Pessoa] } type Mutation { insertPessoa(input: inputPessoa): Pessoa updatePessoa(codigo: Float, input: inputPessoa) Pessoa deletePessoa(codigo: Float) [Pessoa] } `; // Functions const resolvers = { Query: { resposta: function() { return `GraphQL Conectado com Sucesso...`; }, saudacao: function(_, args) { return `Olá ${args.nome}! Seja Muito Bem Vindo(a) a GraphQL!!!! ` }, findPessoaOne: function(_, args) { return db.collection('GraphQL-Pessoa').findOne({codigo: args.codigo}) .then((result) => { return result; }); }, findPessoa: function(_, args) { return db.collection(`GraphQL-Pessoa`).find(args.input).toArray() .then((result) => { return result; }); }, Mutation: { insertPessoa: function(_, args) { args.input.codigo = getCode(); return db.collection(`GraphQL-Pessoa`).insertOne(args.input) .then((result) => { return result.ops[0]; }); }, updatePessoa: function(_, args) { return db.collection('GraphQL-Pessoa').updateOne({codigo: args.codigo}, {$set: args.input}) .then((result) => { if(result.result.n > 0) return `Registro Alterado com Sucesso!`; else return `Ocorreu um erro ao alterar o registro`; }); }, deletePessoa: function(_, args) { return db.collection(`GraphQL-Pessoa`).deleteOne({codigo: args.codigo}) .then((result) => { if(result.result.n > 0) return `Registro Deletado com Sucesso!`; else return `Ocorreu um erro ao deletar o registro`; }); } } } }; const schema = mergeSchemas({ typeDefs: typeDefs, resolvers: resolvers }) // Listen app.listen(3005, () => { console.log(`Servidor Rodando na Porta 3005`); })  
       
      Obrigado
    • Por Ferdz-Agencia-Digital
      Estou importando o NavLink do react-router-dom e montando o meu menu assim:
       
      <Nav navbar>{createLinks(routes)}</Nav>  
      No arquivo routes.js estou montando enviando conforme código abaixo:
       
      var routes = [ { path: "/index", name: "Dashboard", icon: "ni ni-tv-2 text-primary", component: Index, tipo: 1, layout: "/admin", }, { path: "/solicitacoes-trabalho", name: "Solicitações", icon: "ni ni-cart text-orange", tipo: 1, component: Solicitacoes, layout: "/admin", }, { path: "/Clientes", name: "Clientes", icon: "ni ni-single-02 text-orange", tipo: 2, component: Clientes, layout: "/admin", }, ]; export default routes;  
      Há como na exibição eu conseguir filtrar pelo tipo e só mostrar o que for do tipo 1 ?
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.