ReactJSのAPIデータを待たずにレンダリングする

Question

ReactJSで新しく、単一の登録ページを作成しています。APIからのドロップダウンデータですが、データを取得しようとするとエラーが表示されます。

私のサンプルコードは以下の通りです：

AppApi.js：

var AppActions =require('../actions/AppActions'); 
var request = require('superagent'); 

var Data= {}; 
module.exports ={ 
     request.get('*http://api.randomuser.me/*') 
     .set('Accept', 'application/json') 
     .end(function(err, response) { 
     if (err) return console.error(err); 
      Data.details= response.text; 
     AppActions.receiveData(Data.details); 


     }); 
} 

私の行動は次のとおりです。

var AppDispatcher = require('../dispatcher/AppDispatcher'); 
var AppConstants = require('../constants/AppConstants'); 
var AppActions = { 
    receiveData: function(data){ 
     AppDispatcher.handleViewAction({ 
      actionType: AppConstants.RECEIVE_DATA, 
      data: data 
     }) 
    } 
} 
module.exports= AppActions; 

私ConstantFileがある：

module.exports ={ 
    RECEIVE_GENDERS: 'RECEIVE_GENDERS' 
} 

Dispatcherは次のとおりです。私の店で

var Dispatcher = require('flux').Dispatcher; 
    var assign = require('object-assign'); 
    var AppDispatcher= assign(new Dispatcher(), { 
     handleViewAction :function(action){ 
      var payload ={ 
       source: 'VIEW_ACTION', 
       action: action 
      } 
      this.dispatch(payload); 
     } 
    }); 
    module.exports =AppDispatcher; 

：

var AppDispatcher = require('../dispatcher/AppDispatcher'); 
    var AppConstants = require('../constants/AppConstants'); 
    var EventEmitter =require('events').EventEmitter; 
    var assign =require('object-assign'); 
    var AppAPI = require('../utils/appAPI.js'); 

    var CHANGE_EVENT ='change'; 
    var _data=[]; 
    var AppStore= assign({ }, EventEmitter.prototype, { 
     setData: function(data){ 
      console.log("my Data", data); 
      _data=data 
    }, 
     getData: function(){ 
      //not getting data in console 
      console.log("returning Data", _data); 
      return _data; 
     }, 
     emitChange: function(){ 
      this.emit(CHANGE_EVENT); 
     }, 
     addChangeListener : function(callback){ 
      this.on('change', callback); 
     }, 
     removeChangeListener: function(callback){ 
      this.removeListener('change',callback) 
     } 
    }); 
    AppDispatcher.register(function(payload){ 
     var action = payload.action; 
     switch(action.actionType){ 
       case AppConstants.RECEIVE_DATA: 
       AppStore.setData(action.data); 
       AppStore.emit(CHANGE_EVENT); 
       break; 
    } 
     return true; 
    }); 

    module.exports =AppStore; 

私Main.jsがある：

var App= require('./components/App'); 
var React = require('react'); 
var ReactDom = require('react-dom'); 
var AppAPI = require('./utils/appAPI.js'); 

AppAPI.getGenders(); 
ReactDom.render(
    <App/>, 
    document.getElementById('app') 
) 

と私APP.JSがありますフォローで翼形式：

var React =require('react'); 
var AppActions = require('../actions/AppActions'); 
var AppStore = require('../stores/AppStore'); 
function getAppState(){ 
    return{ 
     data: AppStore.getData() 
    } 
} 

var App= React.createClass({ 
    getInitialState: function(){ 
     console.log(getAppState().data) 
     return getAppState() 
    }, 

    componentDidMount: function(){ 
     AppStore.addChangeListener(this._onChange); 
    }, 
    componentWillUnmount: function(){ 
     AppStore.removeChangeListener(this._onChange); 
    }, 
    render: function(){ 
}, 
     _onChange: function(){ 
      this.setState(getAppState()); 
     } 
}); 
module.exports =App; 

問題：（。getAppState（）データ）はconsole.logになっ空のオブジェクトの描画部分は、Ajaxのデータを待っていないので。

この問題の解決方法を教えてください。私はこの問題の解決方法を教えてください。私はこの3日間から苦労しています。事前に おかげ

Answer 1

あなたは、データがまだロードされていないので、あなたがこの方法を表示するコンポーネントを調整することができます反応するコンポーネントをレンダリングしないようにしたい場合：

return{ 
    <div> 
    { 
    this.state.data? 
     <ComponentExample data={this.state.data}/> 
    : 
     null 
    } 
    </div> 
} 

コンポーネントを調整する他の方法がありますstateless componentのようにレンダリングしますが、この方法でうまくいきます。

そうでなければ、それはあなたがgetInitialState()に空のオブジェクトを得た問題ではありません：あなたができるだけ早くあなたのAPIからのデータはretreivedされるように、最初のレンダリング時にデータが不足しているが、その権利である、_onChange()のおかげで、部品ますその結果、ComponentExampleが表示される可能性があります。

Answer 2

function getAppState(){ 
    return{ 
     data: AppStore.getData(), 
     status:AppStore.getStatus() 
    } 
} 

AppStoreの

render: function(){ 
    if(this.state.status=='loading') 
     return (<div className="loading"></div>); 
    if .... 
    return (<RealComponent data={this.state.data}></RealComponent>) 
}, 

へのgetStatus機能を追加