No entiendo por qué mi "console.log(champion)" no devuelve nada... ¿Alguien puede explicarme por qué la función asíncrona no funciona? ¿No se supone que setCahmp cambia el valor de "campeones"? Supongo que porque axios tarda algún tiempo en buscar datos... No sé cómo podría solucionarlo. Y luego me gustaría mapear "campeón" pero es un objeto, ¿cómo podría hacer eso?
gracias
import React, { useEffect, useState } from "react"; import axios from "axios"; const Champs = () => { const [champions, SetChampions] = useState([]); useEffect(() => { axios .get( "http://ddragon.leagueoflegends.com/cdn/12.5.1/data/en_US/champion.json" ) .then((res) => { SetChampions(res.data.data); console.log(res.data.data); }) .then( console.log(champions) ); }, []); return ( <div className="champs"> {/* {champions.map((champ) => { return <p> {champ.id}</p>; })} */} </div> ); }; export default Champs;En su respuesta de API, response.data.data no es una matriz de objetos, son objetos anidados y está inicializando los campeones como una matriz. Entonces, setChampions no puede asignar un objeto a una matriz.
Además, no puede usar la función de mapa para hacer un bucle en un objeto. Puede usar Object.keys para mapear la respuesta.
No debe hacer un doble "entonces" en su código. Si desea saber cuándo se establecen los campeones estatales, debe usar un segundo efecto de uso con "campeones" en el parámetro:
useEffect(() => { axios .get( "http://ddragon.leagueoflegends.com/cdn/12.5.1/data/en_US/champion.json" ) .then((res) => { SetChampions(res.data.data); console.log(res.data.data); }); }, []); useEffect(() => { console.log(champions) }, [champions]);Si desea mapear un objeto, debe hacer esto:
<div className="champs"> {Object.keys(champions).map((key) => { const champ = champions[key] return <p> {champ.id}</p>; })} </div> Object.keys devolverá una matriz de claves de su objeto, para que pueda mapearlo. Y para acceder al valor, simplemente puede usar la clave como esta: const champ = champions[key]
Esperando que pueda ayudarte en tu investigación.
Podría ser que console.log(champion) no funcione porque se llama antes de que se complete SetChampion. No necesita la segunda llamada .then() para verificar el campeón. Para asegurarse de que el campeón se establezca, puede crear un efecto de uso que se llame cada vez que se establezca el campeón, así:
useEffect(() => { console.log(champion); }, [champion])Esto se llamará cuando campeón se establezca inicialmente en [] con useState, y luego cuando lo establezca con SetChampions().