来自 API 的响应返回数据，状态未定义 - React.JS

Question

我有一个 REACT 组件：

import React from 'react';
import Weather from '../service/weatherAPI.js';

export default class DisplayWeather extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      weatherData: []
    }

    this.getWeatherData = this.getWeatherData.bind(this);
  }

  componentDidMount(){
    this.getWeatherData();
  }

  async getWeatherData(){
    let data = await Weather(this.props.location)
    this.setState({ weatherData: data});
    console.log(this.state.weatherData)
  }

此函数引用从另一个文件导出的函数，该文件使用 fetch 调用端点。 所有数据从我正在调用的端点正确返回。 但是，当尝试将此数据设置为状态时，我的数据未定义。

下面是我的 API 调用，以防万一我错过了这里的任何内容：

const Weather = (location) => {
      fetch(url, {
        Method: 'GET',
        headers : {
            'Accept': 'application/json'
          },
      })
      .then((raw) => raw.json())
      .then((response) => {
        return response
      })
    }

export default Weather; 

提前致谢。

Answer 1

你需要在你的天气函数中返回这样的承诺：

const Weather = (location) => {
  return fetch(url, {
    Method: 'GET',
    headers : {
        'Accept': 'application/json'
      },
  })
  .then((raw) => raw.json())
  .then((response) => {
    return response
  })
}

这样， await 就可以处理 Promise 而不仅仅是函数。