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

Question

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.

You have to use promises for yuor fetch function

Mickael B.
– Mickael B.

2020-01-13 19:11:24 +00:00
Commented Jan 13, 2020 at 19:11 — Mickael B.
– Mickael B., Commented Jan 13, 2020 at 19:11
Did the request go through when you check the network logs?

wentjun
– wentjun

2020-01-13 19:12:11 +00:00
Commented Jan 13, 2020 at 19:12 — wentjun
– wentjun, Commented Jan 13, 2020 at 19:12
You need to transform response and assing it to your state

Piotr Żak
– Piotr Żak

2020-01-13 19:12:16 +00:00
Commented Jan 13, 2020 at 19:12 — Piotr Żak
– Piotr Żak, Commented Jan 13, 2020 at 19:12
can you show full code example?

ZiiMakc
– ZiiMakc

2020-01-13 19:22:28 +00:00
Commented Jan 13, 2020 at 19:22 — ZiiMakc
– ZiiMakc, Commented Jan 13, 2020 at 19:22
@wentjun Yes I got the response I expected.

JoshuaRDBrown
– JoshuaRDBrown

2020-01-13 19:23:14 +00:00
Commented Jan 13, 2020 at 19:23 — JoshuaRDBrown
– JoshuaRDBrown, Commented Jan 13, 2020 at 19:23

Zack · Accepted Answer · 2020-01-13 19:34:04Z

1

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.

answered Jan 13, 2020 at 19:34

Zack

363 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related