Question

我在returning data from async requests上阅读了这个答案，但我仍然难以确定如何在我的申请中应用这些答案。

在下面的代码中，我试图访问getWeather异步请求的返回结果，并在getWeather下面的return语句中的jsx中使用该数据。

我注意到之前OP问题的答案是说要在回调函数中处理结果，但我不知道如何通过getWeather调用将其传递回链中

我的问题 - 如何将这些数据传回并在FiveDayWeather函数中访问它？

const URL = `http://api.openweathermap.org/data/2.5/forecast?zip=94040&appid=${OPEN_WEATHER_KEY}`

const FiveDayWeather = () => {
  let days = getWeather()

  return(
    <div className="five-day-weather">
      <div className="day-of-week-item">
        <div className="day">Hi Again</div>
        <div className="image-indicator"></div>
        <div className="temp"></div>
      </div>
    </div>
  )
}

function getWeather() {
  axios.get(URL)
    .then(function(response) {
      handleData(response)
    })
}

function handleData(response) {
  return response
}

Answer 1

您应该使用componentDidMount方法进行API调用，并将结果设置在组件的state中。然后在渲染方法中，您需要使用state。

constructor(props) {
    super(props);
    this.state = {
      error: null,
      isLoaded: false,
      days: []
    };

  }

getWeather() {
  axios.get(URL)
    .then(response => {
       this.setState({
           isLoaded: true,
           days: response //Set the right value here from response
       });
    }).catch( error => {
       this.setState({
           isLoaded: true,
           error
       }); 
    });
 }

render() {
    const { error, isLoaded, days } = this.state;
    if (error) {
      return <div>Error: {error.message}</div>;
    } else if (!isLoaded) {
      return <div>Loading...</div>;
    } else {
      return (
        // your template to show the data goes here
      );
    }
  }

请参阅ReactJS文档了解AJAX here。

Answer 2

您的函数getWeather()没有返回某些内容，handleData()没有按照您的想法进行操作。

您应该尝试使用async函数，而不是返回大量内容。 axios异步工作。因此，await将等待直到从axios检索数据，然后返回它。试试这样：

async function getWeather() {
 return await axios.get(URL)
}

将数据传递回异步请求的调用函数

2 个答案: