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

Posted 2023-02-22

【中文标题】无需等待 React JS 中的 API 数据即可进行渲染

【英文标题】：Rendering happens without waiting for API data in React JS

【发布时间】：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 天以来我一直在努力解决这个问题。 提前致谢

【参考方案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>)
,