Estoy trabajando en una tarea de React, trabajando con la API de pokemon. En este componente en particular, accedo a la API para devolver una lista de todos los nombres de pokemon y mostrarlos en el navegador.
Llamé a la API y la mapeé, y parece funcionar cuando consuelo.Registro los nombres, pero no estoy seguro de qué estoy haciendo mal que no se muestra en el navegador real, y definitivamente podría usar Un poco de ayuda. Código:
import React, { useEffect, useState } from "react"; function PokedexHome(){ const [pokedexList, setPokedexList] = useState(undefined); const [isLoading, setIsLoading] = useState(true); const [hasError, setHasError] = useState(false); useEffect(() => { fetch(`https://pokeapi.co/api/v2/pokemon/?limit=100&offset=0`) .then(response => response.json()) .then(data => { setPokedexList(data) setIsLoading(false); }, error => { setHasError(true) setIsLoading(false) } ); },[]); if(isLoading){ return <p>Loading...</p> } if(hasError){ return <p>An error has occurred, please try again later</p> } pokedexList.results.map((pokemon) => { console.log(pokemon.name) return <div className="list-container"> <p>{pokemon.name}</p> </div> }) }; export default PokedexHomesi tiene una lista, entonces su PokedexHome regresa void :)
entonces, antes que nada, te falta un return antes del mapa.
segundo, (si nada cambió últimamente) no puede devolver una matriz de componentes, debe devolver un solo componente, que puede ser un Fragment (un componente React sin representación de UI, creado para este propósito)
return ( <> { pokedexList.results.map((pokemon) => { console.log(pokemon.name) return <div className="list-container"> <p>{pokemon.name}</p> </div> }) } </> )Su componente debe devolver un JSX , así que agregue return y envuelva su lista con <></> .
import React, { useEffect, useState } from 'react'; function PokedexHome() { const [pokedexList, setPokedexList] = useState(undefined); const [isLoading, setIsLoading] = useState(true); const [hasError, setHasError] = useState(false); useEffect(() => { fetch(`https://pokeapi.co/api/v2/pokemon/?limit=100&offset=0`) .then((response) => response.json()) .then( (data) => { setPokedexList(data); setIsLoading(false); }, (error) => { setHasError(true); setIsLoading(false); }, ); }, []); if (isLoading) { return <p>Loading...</p>; } if (hasError) { return <p>An error has occurred, please try again later</p>; } return ( <> {pokedexList.results.map((pokemon) => { console.log(pokemon.name); return ( <div className="list-container"> <p>{pokemon.name}</p> </div> ); })} </> ); }El problema más probable que se me ocurre aquí es que no está envolviendo todo el JSX entre () llaves redondas. Especifica que desea devolver algo. Con declaración de retorno de función principal, por supuesto
Código de ejemplo
Intenta envolverlo así.
return pokedexList.results.map((pokemon) => ( <div className="list-container"> <p>{pokemon.name}</p> </div> ))