React JS，从API取数时未保存变量名
我得到的问题是，从API获取的数据没有保存到变量中。请看fearvalue，它是稍后被调用的，它的值是一个空字符串。
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，但它是一个空值。有人能帮我把数据保存到这个变量中吗？
导入'./App.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;回答 1
Stack Overflow用户
发布于 2021-10-13 22:32:14
您需要以适当的方式保存响应。在React.js中，您可以使用useState创建状态变量并在其中设置响应。
首先，您需要将响应保存在状态变量中：
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)到目前为止，第一部分已经完成。但是您需要在另一个组件中使用fearValue。为了实现这一点，有一些解决方案，比如使用像Redux或ContextApi这样的Global State Manager。如果没有它们，您的实现将很棘手，因为您不能使用lifting state up技术，因为您没有在父组件(App)中将fearAndGreed作为子组件使用。
在这种情况下，您可以使用fearAndGreed函数实现自定义钩子。由于该函数在页面加载后调用一次，因此可以在组件挂载后通过调用API来实现此功能。
让我们以这种方式使用当前的fearAndGreed函数创建一个自定义钩子：
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;
}解释：
通过一些更改，钩子函数变成了一个自定义的钩子useFearAndGreed。应用程序接口将在组件挂载后调用useEffect (带有一个空的依赖项数组)。钩子将在每次更改时返回fearValue。
现在，是时候在App组件中使用这个自定义钩子了：
function App() {
const fearValue = useFearAndGreed()
return (
<div>
{fearValue}
</div>
);
}
export default App;注意：我删除了App组件中实现的其他部分以简化它。你应该在里面包含你自己的实现。
现在，每次挂载App组件时，useFearAndGreed都会被调用并返回fearValue，它可以保存在一个常量fearValue中，以便在div元素中使用。
https://stackoverflow.com/questions/69535754
复制
相似问题
从firebase取数时，react中没有更新表体
取NSManagedObject未保存
React js从url拉取数据
从Graph API拉取和保存信息
从服务器随机取数停止取数
领取专属 10元无门槛券
AI混元助手 在线答疑
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
