Reactjs Async-Rendering von Komponenten

Question

Ich möchte meine Komponente nach meiner Ajax-Anfrage gerendert werden.

Im folgenden finden Sie meinen Code

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

     }) 

    } 
}); 

aber ich habe den Fehler unten sehen, weil ich in der getan Methode meiner Ajax-Request machen kehre zurück.

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

Gibt es eine Möglichkeit zu warten, meine Ajax-Anforderung vor dem Start Rendering Ende zu?

Answer 1

Es gibt zwei Möglichkeiten, dies zu handhaben. Welche Methode Sie wählen, hängt davon ab, welche Komponente die Daten und den Ladezustand besitzen soll.

1. die Ajax-Anfrage in die übergeordneten bewegen und macht bedingt die Komponente:

   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. Halten Sie die Ajax-Anfrage in der Komponente und macht etwas anderes bedingt, während es Laden ist:

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