CODEWITHSUNDEEP
javascriptreactjs
JoshuaRDBrown
JoshuaRDBrown

Reputation: 351

Response from API returns data, state is undefined - React.JS

I have a REACT component: 

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)
  }

This function references a function exported from another file which is using fetch to call an endpoint. All the data returns correctly from the endpoint I am calling. However, when trying to set this data onto the state, my data is undefined.

Below is my API call, just in case I have missed anything here:

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

export default Weather;

Thanks in advance.

Upvotes: 0

Views: 286

Answers (1)

Zack
Zack

Reputation: 36

You need to return the promise like this in your weather function:

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

That way the await is working on the promise instead of just the function.

Upvotes: 1

Related Questions