React：方法在数据加载之前完成答案

【问题标题】：React: Method finishing before data loadedReact：方法在数据加载之前完成
【发布时间】：2021-06-15 00:49:18
【问题描述】：

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

【问题讨论】：

标签： reactjs react-native async-await xmlhttprequest xhtml

【解决方案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 方法异步（并且是能够从中返回一个值）。

【讨论】：