Skip to main content
se eliminaron 83 caracteres en el cuerpo
Origen Enlace

Como estás poniendo la promesa dentro del jsx no funciona. Así que lo que hice fue justo cuando obtengo los datos, obtener la imagen, luego concatenar los objetos de respuesta y ya al final modificar el estado del componente.

import React, { useState, useEffect } from "react";

const Inicio = () => {
  const [pokemons, setPokemons] = useState([]);
  const url = "https://pokeapi.co/api/v2/pokemon?limit=15&offset=100";

  const getimg = async (pkmnurl) => {
    try {
      let res = await fetch(pkmnurl);
      let data = await res.json();
      return data.sprites.back_default;
    } catch (e) {
      console.log(e);
    }
  };
  
  useEffect(() => {
    fetch(url)
      .then((res) => res.json())
      .then(async (data) => {
        var pokemons = [];
        for (var i = 0; i < data.results.length; i++) {
          const img = await getimg(data.results[i].url);
          const pokemon = Object.assign(data.results[i], {
            url: img,
          });
          pokemons.push(pokemon);
        }
        setPokemons(pokemonsdata.results);
      })
      .catch((e) => console.log(e));
  }, []);

  return (
    <div>
      {pokemons.map((pokemon) => {
        return (
          <div key={pokemon.name}>
            {pokemon.name}
            <img src={pokemon.url} alt={pokemon.name} />
          </div>
        );
      })}
    </div>
  );
};

export default Inicio;

Como estás poniendo la promesa dentro del jsx no funciona. Así que lo que hice fue justo cuando obtengo los datos, obtener la imagen, luego concatenar los objetos de respuesta y ya al final modificar el estado del componente.

import React, { useState, useEffect } from "react";

const Inicio = () => {
  const [pokemons, setPokemons] = useState([]);
  const url = "https://pokeapi.co/api/v2/pokemon?limit=15&offset=100";

  const getimg = async (pkmnurl) => {
    try {
      let res = await fetch(pkmnurl);
      let data = await res.json();
      return data.sprites.back_default;
    } catch (e) {
      console.log(e);
    }
  };
  
  useEffect(() => {
    fetch(url)
      .then((res) => res.json())
      .then(async (data) => {
        var pokemons = [];
        for (var i = 0; i < data.results.length; i++) {
          const img = await getimg(data.results[i].url);
          const pokemon = Object.assign(data.results[i], {
            url: img,
          });
          pokemons.push(pokemon);
        }
        setPokemons(pokemons);
      })
      .catch((e) => console.log(e));
  }, []);

  return (
    <div>
      {pokemons.map((pokemon) => {
        return (
          <div key={pokemon.name}>
            {pokemon.name}
            <img src={pokemon.url} alt={pokemon.name} />
          </div>
        );
      })}
    </div>
  );
};

export default Inicio;

Como estás poniendo la promesa dentro del jsx no funciona. Así que lo que hice fue justo cuando obtengo los datos, obtener la imagen, luego concatenar los objetos de respuesta y ya al final modificar el estado del componente.

import React, { useState, useEffect } from "react";

const Inicio = () => {
  const [pokemons, setPokemons] = useState([]);
  const url = "https://pokeapi.co/api/v2/pokemon?limit=15&offset=100";

  const getimg = async (pkmnurl) => {
    try {
      let res = await fetch(pkmnurl);
      let data = await res.json();
      return data.sprites.back_default;
    } catch (e) {
      console.log(e);
    }
  };
  
  useEffect(() => {
    fetch(url)
      .then((res) => res.json())
      .then(async (data) => {
        for (var i = 0; i < data.results.length; i++) {
          const img = await getimg(data.results[i].url);
          Object.assign(data.results[i], {
            url: img,
          });
        }
        setPokemons(data.results);
      })
      .catch((e) => console.log(e));
  }, []);

  return (
    <div>
      {pokemons.map((pokemon) => {
        return (
          <div key={pokemon.name}>
            {pokemon.name}
            <img src={pokemon.url} alt={pokemon.name} />
          </div>
        );
      })}
    </div>
  );
};

export default Inicio;
Origen Enlace

Como estás poniendo la promesa dentro del jsx no funciona. Así que lo que hice fue justo cuando obtengo los datos, obtener la imagen, luego concatenar los objetos de respuesta y ya al final modificar el estado del componente.

import React, { useState, useEffect } from "react";

const Inicio = () => {
  const [pokemons, setPokemons] = useState([]);
  const url = "https://pokeapi.co/api/v2/pokemon?limit=15&offset=100";

  const getimg = async (pkmnurl) => {
    try {
      let res = await fetch(pkmnurl);
      let data = await res.json();
      return data.sprites.back_default;
    } catch (e) {
      console.log(e);
    }
  };
  
  useEffect(() => {
    fetch(url)
      .then((res) => res.json())
      .then(async (data) => {
        var pokemons = [];
        for (var i = 0; i < data.results.length; i++) {
          const img = await getimg(data.results[i].url);
          const pokemon = Object.assign(data.results[i], {
            url: img,
          });
          pokemons.push(pokemon);
        }
        setPokemons(pokemons);
      })
      .catch((e) => console.log(e));
  }, []);

  return (
    <div>
      {pokemons.map((pokemon) => {
        return (
          <div key={pokemon.name}>
            {pokemon.name}
            <img src={pokemon.url} alt={pokemon.name} />
          </div>
        );
      })}
    </div>
  );
};

export default Inicio;