Estoy realizando una consulta a la Pokeapi con React a través de axios. La solicitud se realiza pero, no puedo mostrar los datos en pantalla porque mi propiedad pokemons[] está vacía, es decir primero se hace la solicitud y luego se monta el componente y ahí es dónde la propiedad sigue vacía.
He intentado realizarlo a través de hooks, con useState y luego setear la propiedad pokemones en el useEffect, y en el mismo useEffect es dónde realizo la petición a la api, la muestro por pantalla y si llega con datos.
Aquí está mi App.js
import React, { useState, useEffect } from "react";
import axios from "axios";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import "bootstrap/dist/css/bootstrap.min.css";
import { Button, Accordion, Card } from "react-bootstrap";
import "./style.css";
import HolaComponent from "./HolaComponent";
import AdiosComponent from "./AdiosComponent";
import Saludar from "./SaludarComponent";
import Contacto from "./pages/Contacto";
import About from "./pages/About";
import ListPokemon from "./pages/ListPokemon";
export default function App() {
let pokes = [];
const [pokemons, setPokemones] = useState([]);
useEffect(() => {
pokemonsListado().then(data => {
setPokemones(JSON.stringify(data.results));
console.log(`data ${JSON.stringify(data.results)}`);
});
console.log(pokemons);
}, []);
let url = `https://pokeapi.co/api/v2/pokemon?limit=10`;
// const pokemonsListado = async () => {
async function pokemonsListado() {
await axios.get(url).then(res => {
pokes = JSON.stringify(res.data.results);
console.log(`response: ${JSON.stringify(res.data.results)}`);
// return JSON.stringify(res.data.results);
});
}
return (
<>
<Router>
<Link to="/">
<Button>Home</Button>
</Link>
<Link to="/about">
<Button>About</Button>
</Link>
<Link to="/contacto">
<Button>Contacto</Button>
</Link>
<Link to="/pokemons">
<Button>Pokemons</Button>
</Link>
<Switch>
<Route path="/about">
<About />
</Route>
<Route path="/contacto">
<Contacto />
</Route>
<Route path="/pokemons">
<ListPokemon />
</Route>
</Switch>
</Router>
<Saludar />
</>
);
}
Y aquí mi componente de Pokemones:
import React, { useState, useEffect } from "react";
import axios from "axios";
export default function ListPokemon() {
let url = `https://pokeapi.co/api/v2/pokemon?limit=10`;
// let pokemons = props.pokemons;
const [pokemons, setPokemones] = useState([]);
useEffect(() => {
pokemonsListado().then(data => {
setPokemones(JSON.stringify(data.results));
console.log(`data ${JSON.stringify(data.results)}`);
});
console.log(pokemons);
}, []);
// const pokemonsListado = async () => {
async function pokemonsListado() {
await axios.get(url).then(res => {
pokes = JSON.stringify(res.data.results);
console.log(`response: ${JSON.stringify(res.data.results)}`);
// return JSON.stringify(res.data.results);
});
}
console.log("los " + pokemons);
return (
<>
<ul>
{pokemons.map(p => (
<li>{p.name}</li>
))}
</ul>
</>
);
}
Lo que quiero realizar es algo así como en Angular que tiene su OnInit y puedes inicializar datos al momento que se carga el componente.
Estoy trabajando este ejemplo en la plataforma StackBlitz, para que se entienda mejor el problema, dejo el enlace del recurso: