React 在渲染之前在服务器中获取数据

我是reactjs新手，我想在服务器中获取数据，以便它将包含数据的页面发送到客户端。

当函数 getDefaultProps 返回像这样的虚拟数据 {data: {books: [{..}, {..}]}} 时就可以了。

但是不适用于下面的代码。代码按此顺序执行，并显示错误消息“无法读取未定义的属性‘书籍’”

1. 获取默认属性
2. return
3. fetch
4. {数据：{书籍：[{..}，{..}]}}

但是，我希望代码应该按这个顺序运行

1. 获取默认属性
2. fetch
3. {数据：{书籍：[{..}，{..}]}}
4. return

任何想法？

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>
    );
  }

您正在寻找的是componentWillMount.

来自文档 https://facebook.github.io/react/docs/component-specs.html#mounting-componentwillmount:

在客户端和服务器上调用一次，紧接在 发生初始渲染。如果你打电话setState在这个方法中，render()将看到更新的状态并且仅执行一次 尽管状态发生了变化。

所以你会做这样的事情：

componentWillMount : function () {
    var data = this.getData();
    this.setState({data : data});
},

这边走，render()只会被调用一次，您将在初始渲染中获得所需的数据。