我是新的反应和通量,我很难想出如何从服务器加载数据.我可以从本地文件加载相同的数据没有问题.
所以首先我有这个控制器视图(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); }); });