0
262
Views¿Cómo evitar llamadas API innecesarias con useEffect?
Todavía soy principiante en ReactJS y tengo problemas para mostrar una lista.
No sé por qué, todo el tiempo se están haciendo llamadas a mi API. Como no pongo ninguna dependencia en useEffect, es decir, solo debo representar mi función una vez.
No entiendo por qué sucede esto. ¿Puedes decirme qué estoy haciendo mal?
Aquí está mi código que puse en codesandbox.io
import React from "react"; import axios from "axios"; import "./styles.css"; const App = () => { const BASE_URL = "https://pokeapi.co/api/v2"; const [pokemons, setPokemons] = React.useState([]); const getAllPokemons = async () => { const { data } = await axios.get(`${BASE_URL}/pokemon`); data.results.map((pokemon) => getPokeType(pokemon)); }; const getPokeType = async (pokemon) => { const { data } = await axios.get(pokemon.url); setPokemons((prev) => [...prev, data]); }; React.useEffect(() => { getAllPokemons(); }, []); console.log(pokemons); return ( <div className="App"> <h1>Hello CodeSandbox</h1> {pokemons.map((pokemon) => ( <p key={pokemon.id} style={{ color: "blue" }}> {pokemon.name} </p> ))} </div> ); }; export default App; 
Muchas gracias por adelantado.
2 answers
Answer question0
Su problema es que está llamando a setPokemons dentro getPokeType (que se llama para cada dato en parte). Su useEffect se llama solo una vez (como se esperaba) y la ${BASE_URL}/pokemon también se ejecuta solo una vez. Pero getPokeType se llama 20 veces y el estado de los pokemons también se cambia 20 veces (una vez para cada instancia de data.results ).
Lo que recomendaría en cambio en su caso es crear una lista de todos los pokemons y establecer el estado solo una vez al final. Entonces algo como:
... const getPokeType = async (pokemon) => { const { data } = await axios.get(pokemon.url); return data; }; const getAllPokemons = async () => { const { data } = await axios.get(`${BASE_URL}/pokemon`); const pokemons = await Promise.all( data.results.map((pokemon) => getPokeType(pokemon)) ); setPokemons(pokemons); }; React.useEffect(() => { getAllPokemons(); }, []); ...0
Estaba teniendo el mismo problema en mi proyecto, la forma en que lo resolví fue moviendo la definición de la función dentro de useEffect
React.useEffect(() => { const getAllPokemons = async () => { const { data } = await axios.get(`${BASE_URL}/pokemon`); data.results.map((pokemon) => getPokeType(pokemon)); }; getAllPokemons(); }, []);Si esto resuelve su problema, acepte la respuesta.