Estoy tratando de llamar a una función asíncrona dentro de un enlace useEffect para evitar recuperar mis datos en cada renderización, pero al hacerlo, mis datos no se actualizan antes de la próxima renderización.

Mis datos deberían cargar un gráfico, por lo que básicamente mi gráfico aparece solo después de volver a renderizar.

 const [PricesArray, setPricesArray] = useState([]); useEffect(() => { const history = Fetcher.fetchPairReservesFromBlock(3, "0xa559D24c7f9534ec19676Cd98421267EA9e02478", blockNumber, 5); var cast = Promise.resolve(history); cast.then(function(value) { setPricesArray(value); }); }, [])

Más tarde, trato de usar PricesArray para completar mi gráfico de esta manera:

 const data = { labels, datasets: [ { label: 'Price in $', data: PricesArray, borderColor: 'rgb(39, 146, 214)', backgroundColor: 'rgb(255, 255, 255, 1)', borderWidth: 1, }, ], };

Mi gráfico finalmente se carga, pero solo después de una nueva representación causada por otra función. Esto no sucede cuando obtengo mis datos sin useEffect (pero luego vuelvo a obtenerlos en cada procesamiento).

Traté de usar otro useEffect que se llama en la actualización de PricesArray:

 useEffect(() => { setBeforePricesArray(PricesArray); }, [PricesArray])

Puedo verificar que esta llamada se ejecuta justo después del primer useEffect, pero mi gráfico aún no se carga antes de la próxima representación.