0
66
VistasuseEffect se ejecuta en un bucle
En mi aplicación React, uso una función useEffect pero se ejecuta continuamente, produce demasiadas solicitudes a la API. Si alguien tiene una idea para hacer que useEffect se ejecute más una vez que se reciben los valores solicitados
Aquí está mi guión:
import React from 'react'; import { useState, useEffect } from "react"; function App() { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null) useEffect(() => { if (!data) ( fetch("http://localhost:4500/coingecko") .then(response => { if (response.ok) { return response.json() } throw response; }) .then(data => { setData(data) }) .catch(error => { console.error("Error fetching data: ", error) setError(error) }) .finally(() => { setLoading(false) })) }, []) //console.log(data) const uniswap = data&&data[0].tickers?.find(donne => donne.trade_url === 'https://app.uniswap.org/#/swap? inputCurrency=0x2260fac5e5542a773aa44fbcfedf7c193bc2c599&outputCurrency=ETH') const uniprice = uniswap?.converted_last?.usd const sushiswap = data&&data[2].tickers?.find(donne => donne.trade_url === 'https://app.sushi.com/swap? inputCurrency=0x2260fac5e5542a773aa44fbcfedf7c193bc2c599&outputCurrency=ETH') const sushiprice = sushiswap?.converted_last?.usd const curvefinance = data&&data[3].tickers?.find(donne => donne.base === 'DAI') const curveprice = curvefinance?.converted_last?.usd const quickswap = data&&data[4].tickers?.find(donne => donne.trade_url === 'https://quickswap.exchange/#/swapinputCurrency=0x0d500b1d8e8ef31e21c99d1db9a6444d3ad f1270&outputCurrency=0xbbba073c31bf03b8acf7c28ef0738decf3695683') const quickprice = quickswap?.converted_last?.usd console.log(uniprice) console.log(sushiprice) console.log(curveprice) console.log(quickprice) return ( <>{uniprice}</> ) } export default AppAquí está la salida de console.log:
3 Respuestas
Responde la pregunta0
Si no desea hacer una gran modificación, veo que deja el Conjunto como "Nulo" y luego en lugar de llamar
useEffect(() => { if(data === null) ( fetch("http://localhost:4500/coingecko") .then(response => { if (response.ok) { return response.json() } throw response; }) .then(data => { setData(data) }) .catch(error => { console.error("Error fetching data: ", error) setError(error) }) .finally(() => { setLoading(false) })) }, []);Simplemente cambie para evaluar !data to data === null ya que es su definición inicial
0
Está utilizando !data como su condición que prueba la "veracidad", que no es lo suficientemente concreta. Necesita una condición fuerte o ninguna en absoluto. Con una matriz de dependencia vacía, tendrá una búsqueda en la carga de la API, ya sea que especifique datos === nulo o no.
0
Copié su código en un sandobx y reemplacé la API con una API JSON pública. No puedo reproducir el problema. Sin embargo, sugeriría no tener !data como su condición para obtener, ya que solo está obteniendo los datos en Mount. Tal vez algo como esto:
useEffect(() => { const fetchData = () => { fetch("url") .then((response) => { ... }) .then((data) => { .. }) .catch((error) => { .. }) .finally(() => { .. }); }; fetchData(); }, []);