Reactjs rendering async dei componenti

Question

Voglio rendere il mio componente dopo che la richiesta di ajax è stata eseguita.

Qui sotto potete vedere il mio codice

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

     }) 

    } 
}); 

ma ho l'errore sotto perché sto tornando il rendering all'interno del metodo fatto della mia richiesta Ajax.

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

Esiste un modo per aspettare la mia richiesta ajax per terminare prima del rendering di partenza?

Answer 1

Ci sono due modi per gestire questo e che si sceglie dipende da quale componente deve possedere i dati e lo stato di caricamento.

1. Spostare la richiesta Ajax nel genitore e condizionatamente rendere il componente:

   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. Mantenere la richiesta Ajax nel componente e rendere qualcos'altro condizionalmente mentre è carico:

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