reactjs – 如何在REACT和FLUX中创建API调用

我是新的反应和通量,我很难想出如何从服务器加载数据.我可以从本地文件加载相同的数据没有问题.

所以首先我有这个控制器视图(controller-view.js)将初始状态传递给视图(view.js)

控制器view.js

var viewBill = React.createClass({
getInitialState: function(){
    return {
        bill: BillStore.getAllBill()
    };
},render: function(){
    return (
        <div>
            <SubscriptionDetails subscription={this.state.bill.statement} />
        </div>
    );
}
 });
 module.exports = viewBill;

view.js

var subscriptionsList = React.createClass({
propTypes: {
    subscription: React.PropTypes.array.isRequired
},render: function(){

   return (
        <div >
            <h1>Statement</h1>
            From: {this.props.subscription.period.from} - To {this.props.subscription.period.to} <br />
            Due: {this.props.subscription.due}<br />
            Issued:{this.props.subscription.generated}
        </div>
    );
}
 });
 module.exports = subscriptionsList;

我有一个动作文件加载我的应用程序的INITAL数据.所以这是数据不被用户操作调用,而是从控制器视图中的getInitialState调用

InitialActions.js

var InitialiseActions = {
initApp: function(){
    Dispatcher.dispatch({
        actionType: ActionTypes.INITIALISE,initialData: {
            bill: BillApi.getBillLocal() // I switch to getBillServer for date from server
        }
    });
}
};
module.exports = InitialiseActions;

然后我的数据API看起来像这样

api.js

var BillApi = {
getBillLocal: function() {
    return billed;
},getBillServer: function() {
    return $.getJSON('https://theurl.com/stuff.json').then(function(data) {

        return data;
    });
}
};
module.exports = BillApi;

这是商店
store.js

var _bill = [];
var BillStore = assign({},EventEmitter.prototype,{
addChangeListener: function(callback) {
    this.on(CHANGE_EVENT,callback);
},removeChangeListener: function(callback) {
    this.removeListener(CHANGE_EVENT,emitChange: function() {
    this.emit(CHANGE_EVENT);
},getAllBill: function() {
    return _bill;
}
});

Dispatcher.register(function(action){
switch(action.actionType){
    case ActionTypes.INITIALISE:
        _bill = action.initialData.bill;
        BillStore.emitChange();
        break;
    default:
        // do nothing
}
});

module.exports = BillStore;

所以如前所述,当我使用BillApi.getBillLocal()在本地加载数据时,一切都正常.但是当我更改为BillApi.getBillServer()时,我会在控制台中得到跟随错误…

Warning: Failed propType: Required prop `subscription` was not specified in     `subscriptionsList`. Check the render method of `viewBill`.
Uncaught TypeError: Cannot read property 'period' of undefined

我还向BillApi.getBillServer()添加了一个console.log(数据),我可以看到从服务器返回数据.但是,在我在控制台中收到警告之后,显示我认为可能是这个问题.任何人都可以提供一些建议或帮助我解决？对不起这么长的职位.

UPDATE

我对api.js文件进行了一些更改(请查看这里的更改和DOM错误plnkr.co/edit/HoXszori3HUAwUOHzPLG),因为它被认为是由于我如何处理承诺.但是,您仍然可以在DOM错误中看到同样的问题.

这是一个异步的问题.使用$.getJSON().then()是不够的.因为它返回一个promise对象,所以你必须通过执行类似api.getBill()的方式处理调用的承诺.然后(function(data){/ * do stuff with data * /});

我用CodePen example编写了以下代码：

function searchSpotify(query) {
  return $.getJSON('http://ws.spotify.com/search/1/track.json?q=' + query)
  .then(function(data) {
    return data.tracks;
  });  
}

searchSpotify('donald trump')
.then(function(tracks) {
  tracks.forEach(function(track) {
    console.log(track.name);
  });
});

reactjs – 如何在REACT和FLUX中创建API调用

相关推荐