El problema que tengo es que los datos obtenidos de la API no se guardan en una variable. Mire el valor del fearvalue , se llamará más tarde y el valor de eso es una cadena vacía.
componente APY
export let fearvalue = []; export const fearAndGreed = () => { // 1. Create a new XMLHttpRequest object let bitcoinAPY = new XMLHttpRequest(); // 2. Configure it: GET-request for the URL /article/.../load bitcoinAPY.open("GET", "https://api.alternative.me/fng/?limit=10&date_format=us", false) bitcoinAPY.onload = () => { const data = JSON.parse(bitcoinAPY.response); /*const saveStaticDataToFile = () => { let blob = new Blob(['Welcome'], {type: 'text/plain;charset=utf-8'}); saveStaticDataToFile(blob, "static.txt") }*/ console.log(data) fearvalue = data.data[0]; } // 3. Send the request over the network bitcoinAPY.send(); } window.addEventListener('load', fearAndGreed) fearvalue se llama en este componente y es un valor en blanco. ¿Alguien puede ayudarme a guardar datos en esta variable?
importar './Aplicación.css';
import './Apy_TAPI'; import './Bitcoin Fear&Greed'; import { DataFormatting } from './DataFormatting.js'; import { fearvalue } from './Bitcoin Fear&Greed'; import './App.css'; import './Apy_TAPI'; import './Bitcoin Fear&Greed'; import { DataFormatting } from './DataFormatting.js'; import { fearvalue } from './Bitcoin Fear&Greed'; function App() { const test1 = "test1" console.log(fearvalue) return ( <div className="App"> <header className="App-header"> <p> Bitcoin analyst tool </p> </header> <div className='Text'> <h1> <img className="Image" src="https://alternative.me/crypto/fear-and-greed-index.png" alt="Latest Crypto Fear & Greed Index" /> </h1> <h2> https://bitinfocharts.com/pl/bitcoin/address/1P5ZEDWTKTFGxQjZphgWPQUpe554WKDfHQ <br /> <br /> {fearvalue} <br /> </h2> </div> </div> ); } export default App;Debe guardar la respuesta de forma adecuada. en React.js , puede usar useState para crear una variable de estado y establecer la respuesta en ella.
Primero, debe guardar la respuesta en una variable de estado:
import React, {useState} from 'react'; export const fearAndGreed = () => { const [fearValue, setFearValue] = useState() // initialize with proper value according to your data type, it could be a empty array [] or an object {}. let bitcoinAPY = new XMLHttpRequest(); bitcoinAPY.open("GET", "https://api.alternative.me/fng/?limit=10&date_format=us", false) bitcoinAPY.onload = () => { const data = JSON.parse(bitcoinAPY.response); setFearValue(data.data[0]) // ------> set the fearValue here } bitcoinAPY.send(); } window.addEventListener('load', fearAndGreed) Hasta ahora, la primera parte está hecha. pero necesita el valor del fearValue en el otro componente. para lograr esto, existen algunas soluciones como usar un Global State Manager como Redux o ContextApi . sin ellos, su implementación sería complicada ya que no puede usar la técnica lifting state up porque no usó el miedo y la fearAndGreed como componente secundario en el componente principal (aplicación).
En tales casos, puede implementar un enlace personalizado con la función de miedo y fearAndGreed . dado que la función se invoca una vez después de la carga de la página, puede implementar esto llamando a la API después de que se montaron sus componentes.
Hagamos un gancho personalizado con la función actual fearAndGreed de esta manera:
import {useEffect, useState} from 'react'; export const useFearAndGreed = () => { const [fearValue, setFearValue] = useState(); useEffect(() => { let bitcoinAPY = new XMLHttpRequest(); bitcoinAPY.open("GET", "https://api.alternative.me/fng/?limit=10&date_format=us", false) bitcoinAPY.onload = () => { const data = JSON.parse(bitcoinAPY.response); setFearValue(data.data[0]) // ------> set the fearValue here } bitcoinAPY.send(); }, []) return fearValue; } Con algunos cambios, fearAndGreed y codicia se convierte en un gancho personalizado para usar miedo y useFearAndGreed . La API llamará al useEffect después de que el componente se montó (con una matriz vacía de dependencias). El gancho devolverá el valor del fearValue en cada cambio.
Ahora, es hora de usar este enlace personalizado dentro del componente de la aplicación:
function App() { const fearValue = useFearAndGreed() return ( <div> {fearValue} </div> ); } export default App; Nota: eliminé las otras partes de la implementación en el componente de la App para simplificarlo. debe incluir su propia implementación dentro.
Ahora, cada vez que se montó el componente de la App , se invocará useFearAndGreed y devolverá el valor de fearValue que se puede guardar en un valor de fearValue constante para usar en el elemento div .