3

Estoy practicando ReactJS y quiero renderizar una lista de superheroes. En Javascript use un bucle for para que renderice hasta 6 templates con personajes de la api usando un Id en la URL, pero usando JSX no sé como hacerlo porque no reconoce la variable heroe en el return. Probe otras alternativas y no encontre solución aún.

import axios, * as others from 'axios';
import React, {useState} from "react";

const Equipo = () => {
  const [heroes, setHeroes] = useState(""); 
 
    axios.get(`https://superheroapi.com/api.php/token/${id}`, {
      "mode": "no-cors",
      "Headers": {
        "Access-Control-Allow-Origin":"*",
      }
    })
    .then(response => {
      setHeroes(response)
  }) 
  .catch(e => {
    console.log(e)
  })
  
  return (
    <div style={{ alignItems: "center", textAlign: "center"}}>
    <h2 id="listaHeroes" style={{ fontSize:50}}>SuperHeroes</h2>
   { heroes.map( heroe => 
      <article>
      <h2>{heroe.name}</h2>
      <p>{heroe.appearance.gender}</p>
      
          <p>Inteligencia: {heroe.powerstats.intelligence}</p>
          <p>Fuerza: {heroe.powerstats.strength}</p>
          <p>Velocidad: {heroe.powerstats.speed}</p>
      
      <img src={heroe.image.url} alt="heroe" width="200px"/>
</article>
  ) }
    </div>
  );
  
}
export default Equipo; 
1
  • Bienvenidx a la comunidad de Stackoverflow. Por favor lee o visita de nuevo ¿Cómo elaboro una buena pregunta?. Recuerda que debes anteponer un título que describa bien el problema que tienes, así como resumir tu pregunta en los primeros párrafos, intentar pegar el código que haga replicar el problema o donde creas que esté el problema, etc. El formular una buena pregunta, aumentará tus posibilidades de recibir ayuda por parte de la comunidad. Commented el 28 jun. 2021 a las 21:55

1 respuesta 1

2

El código que nos compartes ya esta casi listo, solo faltan algunos detalles.

Manejo de Operaciones Asincrónicas useEffect

Un patrón común en ReactJS es usar el hook useEffect para operaciones asincrónicas, el demo muestra como se configura useEffect para correr solo una vez, cuando se monta el componente.

Aquí, se usa el clásico ciclo for para obtener los 6 heroes, usando el index como el parámetro id del API endpoint.

Functional Updates

Se usa Functional Updates para obtener el último valor del estado heroes (previous state) y actualizar su nuevo estado; una vez que se obtiene el estado previo heroes, se propaga y se agrega el nuevo elemento.

JSX

Finalmente, se evalua cuando el arreglo heroes tiene una longitud de 6, solo entonces se devuelven los templates usando el arreglo heroes, tal cual lo tenias configurado, agregando además, la propiedad key en el tag section.

Demo

const Equipo = () => {
  const [heroes, setHeroes] = useState([]); 
  //Manejo de Operaciones Asincrónicas useEffect
  useEffect(()=>{
    for(let i = 1; i <= 6; i++){
      axios.get(`https://superheroapi.com/api.php/token/${i}`, {
        "mode": "no-cors",
        "Headers": {
          "Access-Control-Allow-Origin":"*",
        }})
        .then(response => {
          //functional update callback
          setHeroes(prevState => [...prevState, response.data]);
        }) 
        .catch(e => {
          console.log(e)
        });
    }
  },[]);

  //console.log(heroes);
  //JSX con operador ternario
  return (
    <div style={{ alignItems: "center", textAlign: "center"}}>
    <h2 id="listaHeroes" style={{ fontSize:50}}>SuperHeroes</h2>
      { (heroes.length === 6) ? heroes.map( heroe => 
          <article key={heroe.id}>
            <h2>{heroe.name}</h2>
            <p>{heroe.appearance.gender}</p>
            
                <p>Inteligencia: {heroe.powerstats.intelligence}</p>
                <p>Fuerza: {heroe.powerstats.strength}</p>
                <p>Velocidad: {heroe.powerstats.speed}</p>
            
            <img src={heroe.image.url} alt="heroe" width="200px"/>
          </article>
      ): <p>"Cargando datos..."</p> }
    </div>
  );
}

Nótese que antes de entrar a useEffect, se configura el estado heroes para ser un array en el hook useState.

Espero que esta respuesta sea de ayuda.

5
  • Estuve probando consultas a esa API y aún con las cabeceras sigue dando problemas de CORS. Recibo como response access denied. ¿Es posible que el error esté en el backend del cual viene la API? Lo digo por lo que encontré en está pregunta Enable CORS from front-end in React with axios? Commented el 29 jun. 2021 a las 4:26
  • Interesante @Desarrollos-Web-Urquiza, dime ¿Ya verificaste que tú número token este bien? Saludos
    – g.4
    Commented el 29 jun. 2021 a las 4:42
  • Si por "token" te refieres al número de id, probé con los mismos de tu ejemplo y recibo esa respuesta. Estuve revisando la documentación de esa API en SuperHero API, pero no encuentro ejemplos con esa ruta exacta. Pienso que otra posibilidad es que la ruta de esa API sea incorrecta. Te paso el link del Sandbox en donde estoy haciendo las pruebas. Commented el 29 jun. 2021 a las 4:58
  • @Desarrollos-Web-Urquiza puede que te falte generar el token de acceso/Getting your Access Token es un número muy largo que se sustituye en donde dice token dentro de la url. Saludos
    – g.4
    Commented el 29 jun. 2021 a las 15:33
  • Ah, claro. Seguro debe ser ese el problema. Hay que loguearse con Facebook para generarlo. Commented el 29 jun. 2021 a las 17:32

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.