ReactJS componentDidMount и Fetch API

Question

Только что начал использовать ReactJS и JS, есть ли способ вернуть JSON, полученный из APIHelper.js, в setState dairyList в App.jsx?

Я думаю, что я не понимаю что-то фундаментальное в отношении React или JS или обоих. Состояние dairyList никогда не определяется в 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; 

Answer 1

С fetch является асинхронной вам нужно сделать что-то вроде этого:

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

Answer 2

Это работает! Сделано в соответствии с ответом Джека, добавлено .bind(this) in componentDidMount() и изменено fetch(url) на return fetch (url)

Спасибо! Теперь я вижу State> dairyList: Array [1041] со всеми элементами, мне нужно

// 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;