-1

Meu site tem apenas duas páginas a Home (onde aparece todos os pokemons) e a detalhes onde aparece os detalhes do Pokemon.

A primeira página carrega normal, já a página de detalhes do pokemon dá um erro quando a página abre. OBS.... se eu não "puxar" a imagem e os status do pokemon a página abre

print do erro

import './detalhes.css';
import { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';

// import axios from 'axios';
import api from '../../Services/api';


function Detalhes(){

    const [pokemon, setPokemon] = useState([]);
    const [loading, setLoading] = useState(true);
    const { id } = useParams();
    

  

    useEffect(() => {
        async function LoadDetalhes() {
            const response = await api.get(`pokemon/${id}` , {
                params: {
                    id: id,
                } 
            })
            setPokemon(response.data)
            setLoading(false)
        }
        
        LoadDetalhes()

        }, [])


        if(loading){
            (
                <h2>Carregando...</h2>
            )
        }
        
    return(
        <div className='container-detalhes'>
            <div  className='card-detalhes'>
                <h1>Detalhes do Pokemon {pokemon.name}</h1>
                <strong>{pokemon.name}</strong>
                 <img src={pokemon.sprites.front_default} alt={pokemon.name}></img> 

                 <div className='status'>
                    <div>
                    <strong>{pokemon.stats[0].stat.name} = {pokemon.stats[0].base_stat}</strong><br></br>
                    </div>

                    <div>
                    <strong>{pokemon.stats[1].stat.name} = {pokemon.stats[1].base_stat}</strong><br></br>
                    </div>

                    <div>
                    <strong>{pokemon.stats[2].stat.name} = {pokemon.stats[2].base_stat}</strong><br></br>
                    </div>

                    <div>
                    <strong>{pokemon.stats[3].stat.name} = {pokemon.stats[3].base_stat}</strong><br></br>
                    </div>

                    <div>
                    <strong>{pokemon.stats[4].stat.name} = {pokemon.stats[4].base_stat}</strong><br></br>
                    </div>


                    <div>
                    <strong>{pokemon.stats[5].stat.name} = {pokemon.stats[5].base_stat}</strong><br></br>
                    </div>

                    <div>
                    <strong>{pokemon.types.type[0].name}</strong> 
                    </div>
                </div>
               
                
               
            </div>
        </div>
    )
}
export default Detalhes

1 Resposta 1

0

Olhando o erro, ele ocorre na declaração do JSX onde você vai mostrar a imagem do pokemon, pois ele tenta acessar o atributo front_default dentro do atributo sprites que está sem valor definido.

<img src={pokemon.sprites.front_default} alt={pokemon.name}></img>

Coloque um debugger na linha setLoading(false) e veja se o atributo sprites está com valor dentro do objeto do state pokemon.

5
  • o estranho é que tem este atributo, "uso o mesmo na página inicial", o estranho é que as vezes ele carrega a image, e as vezes não. (serve para outros dados tb) Commented 5/01/2023 às 21:37
  • Testa com outros pokemon se dá o mesmo erro. Talvez tenha algum sem essa informação
    – Adriano
    Commented 5/01/2023 às 21:49
  • com todos é a mesma coisa.... as vezes carrega a imagem e outras vezes não.... fiz o teste no console.log e mesma coisa..... uma suspeita que eu tive foi se quando estava chamando a API talvez algum dado não estava vindo por causa de algum limite ou algo assim Commented 5/01/2023 às 23:56
  • Uma sugestão seria fazer o acesso aos sub atributos de forma de segura usando a lib lodash: <img src={_.get(pokemon, 'sprites.front_default') )} alt={_.get(pokemon, 'name')} /> Fiz uma edição aqui para você testar: código
    – Adriano
    Commented 6/01/2023 às 0:24
  • Finalmente Funcionou... só vou precisar entender como funciona essa biblioteca para usar futuramente.... MUITO OBRIGADO Commented 6/01/2023 às 3:16

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .