1

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:

React y pokeapi

1 respuesta 1

0

Vamos por partes:

El ciclo de vida OnInit en Angular, puede tener su contraparte en React en un metodo llamado componentDidMount, el cual solo se ejecutará una vez y lo puedes simular con hooks tal como lo tienes actualmente:

useEffect(() => {
  // TODO:
}, []);

Ahora tratemos de entender que estás realizando prácticamente lo mismo tanto en el componente App como en ListPokemon (lo cual está mal) y ya esto depende de a quien quieras delegarle la responsabilidad de realizar la petición, obtener la información y ponerla en el estado.

Yo voy a delegarle esta responsabilidad al componente App y le voy a pasar la lista de pokemones como un prop al componente ListPokemon

Con lo de arriba aclarado procedo a ayudarte a mejorar tu componente App de la siguiente manera, (lo voy a simplificar y eliminar código innecesario para que sea claro):

export default function App() {
  const [pokemons, setPokemones] = useState([]);
  const url = `https://pokeapi.co/api/v2/pokemon?limit=10`;

  // Convertimos tu función a un arrow function para evitar posibles errores de scope
  const pokemonsListado = async () => {
    // Si ya estamos utilizando utilidades asíncronas no hay necesidad
    // de implementar esta función como una promesa, la cual podemos
    // simplificar mucho mejor de la siguiente manera:

    // Realizamos nuestra petición
    const req = await axios.get(url);
    // Los pokemones obtenidos de dicha petición
    const pokemones = await req.data.results;
    // Hacemos uso de nuestro hook y ponemos en el estado
    // a nuestros pokemones
    setPokemones(pokemones);
  };

  useEffect(() => {
    // Ejecutamos nuestra función una vez el componente se monte
    pokemonsListado();
  }, []);

  // Pasamos nuestro valor del estado como un prop a nuestro componente hijo
  return <ListPokemon pokemons={pokemons} />;
}

Y no siendo más, nuestro componente hijo se podría simplificar para evitar la redundancia de peticiones y manejo de información de la siguiente manera:

export default function ListPokemon({ pokemons }) {
  return (
    <>
      <ul>
        {pokemons.map(p => (
          <li>{p.name}</li>
        ))}
      </ul>
    </>
  );
}

Aquí como último recurso te dejo un ejemplo totalmente aislado de lo que quieres hacer basado en tu snippet, funcional e implementado como lo acabo de describir en toda esta respuesta: React-Axios-PokeAPI

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.