Actualmente estoy trabajando en un proyecto de stock para mi cartera y estoy usando finnhub como API. Puedo registrar todo en mi consola. Sin embargo, no puedo representarlo ya que los "datos" no están declarados globalmente y deben estar dentro de una determinada función.
Intenté renderizar globalmente pero no tuve suerte...
Entonces, mi pregunta es ¿cómo hago que los 'datos' sean globales para que pueda representarlos dentro del retorno de "StockHeader"?
Esto es lo que tengo hasta ahora...
import React,{ useState, useEffect } from 'react'; const StockHeader = (data) => { const [stocks, setStocks] = useState({}); const getStocks = () => { //setting stocks setStocks(stocks) } //calling it once useEffect(()=> { getStocks(); }, []) //using finhubs ready made code from documentation const finnhub = require('finnhub'); const api_key = finnhub.ApiClient.instance.authentications['api_key']; api_key.apiKey = "my apikey" const finnhubClient = new finnhub.DefaultApi() finnhubClient.quote("AAPL", (error, data, response) => { //I can log the data but I cant show it in my component console.log(data.c) }); return ( <> {/* This says that data is not defined */} <h1>{data.c}</h1> </> ) } export default StockHeaderSolo necesita un poco de reorganización del código para que la solicitud de API solo ocurra una vez y para que pueda usar setStocks para almacenarla:
const StockHeader = (data) => { const [stocks, setStocks] = useState({}); useEffect(()=> { //this could be separated into a `getStocks` function if you want const finnhub = require('finnhub'); const api_key = finnhub.ApiClient.instance.authentications['api_key']; api_key.apiKey = "my apikey" const finnhubClient = new finnhub.DefaultApi() finnhubClient.quote("AAPL", (error, data, response) => { console.log(data.c); setStocks(data.c); }); }, []); return ( <> {/* You probably don't want to render `stocks` itself, but this shows you how to get access to the variable */} <h1>{stocks}</h1> </> ) }