Estoy haciendo un ejercicio para aprender React en el que configuré una página con una lista de nombres de Pokémon en los que se puede hacer clic que se vinculan a la página de detalles específica de Pokémon. A continuación se muestra el código de la página de detalles.
import { useState, useEffect } from "react"; import axios from "axios"; import { useParams } from "react-router-dom"; export default function DetailsPage() { const pokeName = useParams(); console.log(pokeName); const [pokeList, setPokeList] = useState([]); useEffect(() => { const fetchData = async () => { const response = await axios.get( "https://pokeapi.co/api/v2/pokemon?limit=151" ); console.log(response.data); setPokeList(response.data.results); }; fetchData(); }, []); const specificPokemon = pokeList.find((pokemon) => { return pokemon.name === pokeName.pokemon_name; }); console.log(specificPokemon); console.log(specificPokemon.name); return <div><p>{specificPokemon.name}</p></div>; }Este código tiene un error que no entiendo
El console.log(specificPokemon) funciona bien, pero el console.log(specificPokemon.name) me da el siguiente error
Uncaught TypeError: Cannot read properties of undefined (reading 'name')El código correcto es el siguiente, pero me pregunto por qué mi método no funciona.
const [pokeList2, setPokeList2] = useState([]); useEffect(() => { const fetchData = async () => { const response = await axios.get( `https://pokeapi.co/api/v2/pokemon/${pokeName.pokemon_name}` ); console.log(response.data); setPokeList(response.data); }; fetchData(); }, []); console.log(pokeList);Gracias
Cuando el código se ejecuta primero, pokeList es una matriz vacía y no puede encontrar el name de la propiedad. Deberías crear un segundo estado y hacer algo como esto
const pokeName = useParams(); const [pokeList, setPokeList] = useState([]); const [specificPokemon, setSpecificPokemon] = useState({}); useEffect(() => { const fetchData = async () => { const response = await axios.get( "https://pokeapi.co/api/v2/pokemon?limit=151" ); setPokeList(response.data.results); const selectedPokemon = response.data.results.find((pokemon) => { return pokemon.name === pokeName.pokemon_name; }); setSpecificPokemon(selectedPokemon) }; fetchData(); }, []) Y no te olvides de hacer que la propiedad specificPokemon sea opcional como este specificPokemon?.name
Cuando su componente está montado, pokeList es una matriz vacía.
React ejecutará el siguiente bloque antes de que el gancho useEffect haya terminado de ejecutarse:
const specificPokemon = pokeList.find((pokemon) => { return pokemon.name === pokeName.pokemon_name; }); console.log(specificPokemon); console.log(specificPokemon.name); Siempre que su matriz esté vacía, el Pokémon specificPokemon no estará undefined y llamar a specificPokemon.name activará su error.
Cuidado con console.log , su comportamiento no siempre es sincrónico.
Podrías pensar que Pokémon specificPokemon está definido correctamente porque console.log no necesariamente mostrará undefined .
Para verificar esto, use console.log(JSON.stringify(specificPokemon)); .