[解決済み] Reactjsのコンポーネントの非同期レンダリング

質問

ajaxリクエストが完了した後に、私のコンポーネントをレンダリングしたいのですが。

下記は私のコードです。

var CategoriesSetup = React.createClass({

    render: function(){
        var rows = [];
        $.get('http://foobar.io/api/v1/listings/categories/').done(function (data) {
            $.each(data, function(index, element){
                rows.push(<OptionRow obj={element} />);
            });
           return (<Input type='select'>{rows}</Input>)

        })

    }
});

しかし、私は私のAjaxリクエストのdoneメソッド内でrenderを返しているので、以下のエラーが発生します。

Uncaught Error: Invariant Violation: CategoriesSetup.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.

レンダリングを開始する前に、ajaxリクエストが終了するのを待つ方法はありますか？

どのように解決するのですか？

これを処理する方法は2つあり、どちらを選ぶかは、データとロード状態をどのコンポーネントが所有すべきかによります。

1. Ajax リクエストを親に移動し、コンポーネントを条件付きでレンダリングします。

   var Parent = React.createClass({
     getInitialState: function() {
       return { data: null };
     },
   
     componentDidMount: function() {
       $.get('http://foobar.io/api/v1/listings/categories/').done(function(data) {
         this.setState({data: data});
       }.bind(this));
     },
   
     render: function() {
       if (this.state.data) {
         return <CategoriesSetup data={this.state.data} />;
       }
   
       return <div>Loading...</div>;
     }
   });
   
   

2. Ajaxリクエストをコンポーネント内に保持し、ロード中に条件付きで他のものをレンダリングします。

   var CategoriesSetup = React.createClass({
     getInitialState: function() {
       return { data: null };
     },
   
     componentDidMount: function() {
       $.get('http://foobar.io/api/v1/listings/categories/').done(function(data) {
         this.setState({data: data});
       }.bind(this));
     },
   
     render: function() {
       if (this.state.data) {
         return <Input type="select">{this.state.data.map(this.renderRow)}</Input>;
       }
   
       return <div>Loading...</div>;
     },
   
     renderRow: function(row) {
       return <OptionRow obj={row} />;
     }
   });