Tengo un código que hace una petición fetch (api de pokemon) y me devuelve un array vacío pero, en el segundo renderizado, es decir, cuando el componente se renderiza por segunda vez sin recargar la página (solo guardando el código), se muestra el array con los resultados. El problema es que quiero mostrarlos cuando react renderiza el componente por 1ra vez, de forma "normal".
Código:
import { useState, useEffect } from 'react';
const pokeApi = async () => {
const res = await fetch(`https://pokeapi.co/api/v2/pokemon`);
const data = await res.json();
return data.results;
}
const AddPokemon = () => {
const [pokemonObjet, setPokemonObjet] = useState([]);
const Data = async () => {
let data = await pokeApi();
setPokemonObjet(data);
console.log(pokemonObjet); //Return array[0]
}
useEffect(() => {
Data();
console.log(pokemonObjet); // here too
}, []);
return (
<>
<h1>Pokemon </h1>
</>)
}
export default AddPokemon;