REACT: Erro ao chamar Dados da API

[northonTV]

Select Topic Area

Bug

Body

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
`mport './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``

[maaicondgl]

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.

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