Lo que mi código está tratando de hacer es obtener una variedad de objetos haciendo múltiples solicitudes de obtención. Luego envío la respuesta.datos a la variable setPokemonTeam y no funciona. Cada vez que registro la matriz en la consola, aparece vacía.
const [pokemonTeam, setPokemonTeam] = useState([]); const generatePokemon = async () => { setPokemonTeam([]); const pokemonIDs = []; do { const randomID = Math.floor(Math.random() * 121); if (!pokemonIDs.includes(randomID)) { pokemonIDs.push(randomID); } } while (pokemonIDs.length < 6); //max 6 pokemon only let promises = []; for (var i = 0; i < pokemonIDs.length; i++) { promises.push( await axios .get(`https://pokeapi.co/api/v2/pokemon/${pokemonIDs[i]}/`) .then((res) => { setPokemonTeam([...pokemonTeam, res.data]); console.log(res.data); console.log(pokemonTeam); }) .catch((err) => { console.log(err); }) ); } Promise.all(promises); console.log(pokemonTeam); };mi consola obtiene los datos correctos pero no actualiza la matriz pokemonTeam .
Usa useEffect(()=>console.log(pokemonTeams), [pokemonTeams]) antes de esta función.
Además, eche un vistazo a React Hooks y UseEffect
Por favor, compruebe si esto es útil para usted.
import React, {useState, useEffect} from 'react' import ReactDOM from 'react-dom' import axios from 'axios' function App() { const [pokemonTeam, setPokemonTeam] = useState([]) let pokemonIDs = [] do { const randomID = Math.floor(Math.random() * 121) if (!pokemonIDs.includes(randomID)) { pokemonIDs.push(randomID) } } while (pokemonIDs.length < 6) useEffect(() => { for (var i = 0; i < pokemonIDs.length; i++) { axios .get(`https://pokeapi.co/api/v2/pokemon/${pokemonIDs[i]}`) .then((res) => { setPokemonTeam((prev) => [...prev, res.data]) }) .catch((err) => { console.log(err) }) } }, []) console.log(pokemonTeam) return 'Hello' } ReactDOM.render(<App />, document.getElementById('root'))El valor predeterminado de pokemonTeam es "[]" línea 1 (establecido en useState):
const [pokemonTeam, setPokemonTeam] = useState([]);Tienes que quitar la linea 3
setPokemonTeam([]);Para evitar recargar su componente antes de que la solicitud asíncrona termine de ejecutarse