React:在加载数据之前完成方法



我正在尝试使用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方法异步(并能够从中返回值(。

相关内容

  • 没有找到相关文章

最新更新