0

buenas noches tengo un problema, estoy haciendo una pagina que muestre algunos pokemon, ya hice las peticiones a la pagina pokeApi, y en la consola me devuelve exactamente los valores que quiero, en este caso solo estoy piediendo 5 pokemon, pero al pasarlos al state de React solo se agrega 1, el ultimo, que puede ser? muchas gracias, adjunto mi codigo

const App = () => {
  const [img, setImg]=useState([])
  const [info, setInfo]=useState([])
  useEffect(()=>{
    const pokeApi= async()=>{
      const url = 'https://pokeapi.co/api/v2/pokemon?limit=5'
      const request = await fetch(url)
      const result =await request.json()
      const results = result.results
      results.forEach(p=>(
        fetchData(p)
      ))
    }
    const fetchData = async (p)=>{
      const url = p.url
      const request = await fetch(url)
      const response = await request.json()
      /* console.log(response.sprites['front_default']) */
      setImg(response)
      setInfo(response)
    }
    pokeApi()
  },[])
  return (
    <Container>
      <Image
        img={img}
      />
      <PokemonData
        info={info}
      />
    </Container>
  );
}
 
export default App;
1
  • 1
    Estas pisando los datos por cada iteración del foreach. En vez de usar los Sets dentro del foreach, ve almacenando cada pokemon en un array auxiliar. Al final de la iteración, setea cada state con esos arrays(2 en tu caso ya qué tienes img e info).
    – b3lg1c4
    Commented el 9 ene. 2021 a las 5:03

1 respuesta 1

1

Al parecer es por siempre se esta actualizando el state cada que llega un nuevo valor en la iteración. podrías solucionarlo utilizando la funcion concat o con una arrow function dentro de tus set para ir agregando nuevos valores.

Ejemplo:

setImg(img => img.concat(response));
setInfo(info => info.concat(response));

otra opcion

setImg(img => [...img, response]);
setInfo(info => [...info, response]);
1
  • Muchas gracias, si funcionó
    – Invited
    Commented el 9 ene. 2021 a las 5:46

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.