我正在尝试使用XHTML请求从Yahoo Finance检索一些数据,这很有效。然而,我正试图显示在我的应用程序上检索到的数据,但检索数据的方法是返回";未定义的";在数据加载之前。
async componentDidMount() {
var tempData = await this.fetchAsync();
console.log(tempData)
this.handleLoad(tempData)
}
handleLoad = (num) => {
this.setState(state => ({
price: num
}));
}
async fetchAsync () {
const xhr = new XMLHttpRequest();
xhr.withCredentials = true;
const {params} = this.props.navigation.state;
var ticker = params.ticker;
var result;
var tempArray = [1];
var url = "https://yahoo-finance-low-latency.p.rapidapi.com/v8/finance/spark?symbols=" + ticker + "&range=2y&interval=1d"
xhr.addEventListener("readystatechange", function () {
if (this.readyState === this.DONE) {
result = JSON.parse(this.responseText);
tempArray = result[ticker]['close'];
testPrice = tempArray[tempArray.length-1]
console.log(testPrice)
var self = this;
return tempArray[tempArray.length-1]
}
});
xhr.open('get', url, true);
xhr.setRequestHeader("x-rapidapi-key", "my key");
xhr.setRequestHeader("x-rapidapi-host", "yahoo-finance-low-latency.p.rapidapi.com");
xhr.send();
}
我正在使用componentDidMount()
函数开始调用方法来加载数据,但当应用程序渲染时,不会显示值。
正如您在fetchAsync()
方法中看到的那样,我返回了所需的值,但当我尝试并console.log此方法的返回时,我得到了未定义的值。
我也尝试过将这个返回移到方法的末尾,但当我在这里使用console.log来确保tempArray
具有我需要的数据时,它是空的。
我需要在屏幕上显示tempArray[tempArray.length-1]
,但数据没有及时加载,即使加载后也不会更新。
fetchAsync
中的return tempArray[tempArray.length-1]
实际上并不是从fetchAsync
返回的,它只是从addEventListener
中的回调函数返回的。事实上,实际上并没有任何代码利用该函数上的async
标记。
对此的一个解决方案是直接从fetchAsync
内部调用handleLoad
,而不是从return tempArray
内部调用(当然,您需要确保已将this
正确绑定到handleLoad
(。
另一种解决方案是将回调函数传递到fetchAsync
中,您可以调用该函数而不是返回。然后,在你的呼叫站点,它可能看起来像这样:
this.fetchAsync((tempData) => {
console.log(tempData)
this.handleLoad(tempData)
});
最后,第三种解决方案是从XMLHTTPRequest
切换到fetch
,然后您可以利用async/await
和使fetchAsync
方法异步(并能够从中返回值(。