ReactJS componentDidMount and Fetch API

Question

Just started using ReactJS and JS, is there a way to return the JSON obtained from APIHelper.js to setState dairyList in App.jsx?

I think I'm not understanding something fundamental about React or JS or both. The dairyList state is never defined in Facebook React Dev Tools.

// App.jsx
export default React.createClass({
  getInitialState: function() {
    return {
      diaryList: []
    };
  },
  componentDidMount() {
    this.setState({
      dairyList: APIHelper.fetchFood('Dairy'), // want this to have the JSON
    })
  },
  render: function() {
   ... 
  }


// APIHelper.js
var helpers = {
  fetchFood: function(category) {
    var url = 'http://api.awesomefoodstore.com/category/' + category

    fetch(url)
    .then(function(response) {
      return response.json()
    })
    .then(function(json) {
      console.log(category, json)
      return json
    })
    .catch(function(error) {
      console.log('error', error)
    })
  }
}

module.exports = helpers;

Is your APIHelper.js file even syntactically correct? After you fix it, another thing: APIHelper.fetchFood is asynchronous. — zerkms
– zerkms, Commented Aug 3, 2016 at 23:21
@zerkms Thanks, just noticed the closing brace for fetchFood was after var url. Is there a better way to fetch the data, wait for the response and then go from there? — Nikkawat
– Nikkawat, Commented Aug 3, 2016 at 23:28

Jack · Accepted Answer · 2016-08-03 23:57:54Z

8

Since fetch is async you'll need to do something like this:

componentDidMount() {
  APIHelper.fetchFood('Dairy').then((data) => {
    this.setState({dairyList: data});
  });
},

answered Aug 3, 2016 at 23:57

Jack

21.3k12 gold badges51 silver badges48 bronze badges

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

2 Comments

Nikkawat Over a year ago

Sweet! Thanks for your answer it helped.

Jack Over a year ago

@Nikkawat Great! If there's nothing else you should click the checkmark next to this answer.

Nikkawat · Accepted Answer · 2016-08-11 21:02:41Z

1

It works! Made changes according to Jack's answer, added .bind(this) in componentDidMount() and changed fetch(url) to return fetch (url)

Thanks! I now see State > dairyList: Array[1041] with all the elements I need

// App.jsx
export default React.createClass({
  getInitialState: function() {
    return {
      diaryList: []
    };
  },
  componentDidMount() {
    APIHelper.fetchFood('Dairy').then((data) => {
      this.setState({dairyList: data});
    }.bind(this));
  },
  render: function() {
   ... 
  }


// APIHelper.js
var helpers = {
  fetchFood: function(category) {
    var url = 'http://api.awesomefoodstore.com/category/' + category

    return fetch(url)
    .then(function(response) {
      return response.json()
    })
    .then(function(json) {
      console.log(category, json)
      return json
    })
    .catch(function(error) {
      console.log('error', error)
    })
  }
}

module.exports = helpers;

edited Aug 11, 2016 at 21:02

answered Aug 4, 2016 at 0:52

Nikkawat

791 gold badge2 silver badges11 bronze badges

3 Comments

Jack Over a year ago

FWIW, You shouldn't need .bind(this) this automatically happens with the "fat arrow" (() => {} style.

Nikkawat Over a year ago

Without .bind(this) I get an error Uncaught (in promise) TypeError: Cannot read property 'setState' of undefined

Jack Over a year ago

That's interesting. The docs, and my experience say otherwise, but whatever works!

Collectives™ on Stack Overflow

ReactJS componentDidMount and Fetch API

2 Answers 2

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related