ReactJS componentDidMountとFetch API

Question

ReactJSとJSの使用を開始したばかりですが、APIHelper.jsから取得したJSONをApp.jsxのsetState dairyListに戻す方法はありますか？

私はReactやJS、あるいはその両方について基本的な何かを理解していないと思います。 dairyListの状態は、FacebookのReact Dev Toolsでは定義されません。 fetch以来

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

は、あなたがこのような何かを行う必要があります非同期（async）です：

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

Answer 2

それは働きます！ Jackの答えに従って変更し、componentDidMount（）内に.bind(this)を追加し、fetch(url)をreturn fetch (url)に変更しました

ありがとう！私は今州> dairyListを参照してください。私は

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