反应：数据加载前的方法完成

如何解决反应：数据加载前的方法完成

我正在尝试使用 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]，但是数据没有及时加载，并且加载后也没有更新。

解决方法

您在 return tempArray[tempArray.length-1] 中的 fetchAsync 实际上并不是从 fetchAsync 返回——它只是从 addEventListener 中的回调函数返回。事实上，您实际上没有任何代码利用您在该函数上的 async 标记。

对此的一种解决方案是直接从 handleLoad 内部调用 fetchAsync 而不是 return tempArray。 （当然，您需要确保已将 this 正确绑定到 handleLoad）。

另一种解决方案是将回调函数传递给您可以调用而不是返回的 fetchAsync。然后，在您的呼叫站点，它可能如下所示：

this.fetchAsync((tempData) => {
  console.log(tempData)
  this.handleLoad(tempData)
});

最后，第三种解决方案是从 XMLHTTPRequest 切换到 fetch，然后您可以利用 async/await 并实际上使{{ 1}} 方法异步（并且能够从中返回一个值）。