0

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;
3
  • En la funcion Data, intenta esto: setPokemonObjet([...pokemonObjet, data]);
    – Emanuek
    Commented el 20 jul. 2022 a las 15:58
  • 2
    Estamos en Stack Overflow en español, por lo tanto el título como el cuerpo de la pregunta deben ir solo en español. Traduce el título. Lee Cómo preguntar y haz el recorrido de bienvenida para conocer el funcionamiento del sitio.
    – padaleiana
    Commented el 21 jul. 2022 a las 12:00
  • Lo puedo solucionar, era porque tenía activado el <React.StricMode> al momento de renderizar, por eso se mostraba dos veces. Gracias!! Commented el 22 jul. 2022 a las 12:41

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.