无需等待 React JS 中的 API 数据即可进行渲染答案

【问题标题】：Rendering happens without waiting for API data in React JS无需等待 React JS 中的 API 数据即可进行渲染
【发布时间】：2016-09-24 05:09:42
【问题描述】：

我是 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;

我的常量文件是：

module.exports ={
    RECEIVE_GENDERS: 'RECEIVE_GENDERS'
}

调度员是：

    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;

问题： 空对象进入 console.log(getAppState().data) 因为渲染部分没有等待 ajax 数据。

请帮助我或给我一些解决这个问题的方法，自过去 3 天以来我一直在努力解决这个问题。 提前致谢

【问题讨论】：

标签： javascript ajax reactjs flux reactjs-flux

【解决方案1】：

如果你想避免渲染一个 React 组件，因为数据还没有加载，你可以调整组件的显示方式：

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

还有其他方法可以调节组件渲染，例如使用stateless component，但这种方法可以正常工作。

否则，getInitialState() 中的空对象不是问题：您在第一次渲染时缺少数据是正确的，但是一旦从您的 API 中检索数据，感谢_onChange()，该组件将被重新渲染，因此可以显示ComponentExample。

【讨论】：

【解决方案2】：

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

将getStatus函数添加到AppStore

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

【讨论】：