ReactJS componentDidMount und Fetch-API

Question

Gerade erst mit ReactJS und JS, gibt es eine Möglichkeit, die JSON von APIHelper.js zu SetState MolkereiList in App.jsx zurückgeben?

Ich glaube, ich verstehe etwas grundlegend über React oder JS oder beides. Der Status "molkereiListe" ist in Facebook React Dev Tools nicht definiert.

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

Seit fetch ist async Sie etwas tun müssen werden:

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

Answer 2

Es funktioniert! Änderungen nach Jacks Antwort vorgenommen, .bind(this) in componentDidMount() hinzugefügt und geändert fetch(url) zu return fetch (url)

Vielen Dank! Ich sehe jetzt Staat> dairyList: Array [1041] mit allen Elementen I

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