Estoy jugando con una API que obtiene una lista de Pokémon y los datos correspondientes que se ven así.
export function SomePage() { const [arr, setArray] = useState([]); useEffect(() => { fetchSomePokemon(); }, []); function fetchSomePokemon() { fetch('https://pokeapi.co/api/v2/pokemon?limit=5') .then(response => response.json()) .then((pokemonList) => { const someArray = []; pokemonList.results.map(async (pokemon: { url: string; }) => { someArray.push(await fetchData(pokemon)) }) setArray([...arr, someArray]); }) } async function fetchData(pokemon: { url: string; }) { let url = pokemon.url return await fetch(url).then(async res => await res.json()) } console.log(arr); return ( <div> {arr[0]?.map((pokemon, index) => ( <div key={index} > {pokemon.name} </div> )) } </div> ); }El código funciona (más o menos), sin embargo, en el primer renderizado, el mapa no mostrará nada a pesar de que console.log genera datos. Solo una vez que la página se haya actualizado, se mostrarán los datos correctos. Tengo la sensación de que tiene algo que ver con no manejar las promesas correctamente. Tal vez alguien podría ayudarme. AIT
Salida esperada: Datos completados en el procesamiento inicial (en este caso, se mostrarán los nombres de Pokémon)
El método de map integrado en arreglos de naturaleza síncrona. En fetchSomePokemon , debe devolver una promesa de la función de devolución de llamada del mapa, ya que está escribiendo código asíncrono en ella.
Ahora los elementos de la matriz devueltos por pokemonList.results.map son promesas. Debe usar Promise.all en pokemonList.results.map y await .
await Promise.all(pokemonList.results.map(async (pokemon: { url: string; }) => { return fetchData.then(someArray.push(pokemon)) }));En su primer renderizado, aún no tiene los datos, por lo que arr[0] no existe para que pueda .map , por lo que falla. Debe verificar si los datos ya están allí antes de mapear.
Usando el encadenamiento opcional , si no hay datos, no generará un error en su primer procesamiento y se procesará correctamente cuando lleguen los datos y se vuelva a procesar.
... return ( <div> {arr[0]?.map((pokemon, index) => ( <div key={index}>{pokemon.name}</div> ))} </div> ); }en
useEffect(() => { fetchSomePokemon(); }, []);
[] le dice a reaccionar que no hay dependencias para que suceda este efecto,
lea más aquí https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects