我是 reactjs 的新手,我想在服务器中获取数据,以便它将带有数据的页面发送到客户端。
当函数 getDefaultProps 返回像 {data: {books: [{..}, {..}]}} 这样的虚拟数据时是可以的。
但是不适用于下面的代码。代码按此顺序执行,并显示错误消息“无法读取未定义的属性 'books'”
- 获取默认props
- 返回
- 拿来
- {数据:{书籍:[{..},{..}]}}
但是,我希望代码应该按此顺序运行
- 获取默认props
- 拿来
- {数据:{书籍:[{..},{..}]}}
- 返回
任何的想法?
statics: {
fetchData: function(callback) {
var me = this;
superagent.get('http://localhost:3100/api/books')
.accept('json')
.end(function(err, res){
if (err) throw err;
var data = {data: {books: res.body} }
console.log('fetch');
callback(data);
});
}
getDefaultProps: function() {
console.log('getDefaultProps');
var me = this;
me.data = '';
this.fetchData(function(data){
console.log('callback');
console.log(data);
me.data = data;
});
console.log('return');
return me.data;
},
render: function() {
console.log('render book-list');
return (
<div>
<ul>
{
this.props.data.books.map(function(book) {
return <li key={book.name}>{book.name}</li>
})
}
</ul>
</div>
);
}