Reagiert auf asynchrones Rendern von Komponenten

Ich möchte meine Komponente rendern, nachdem meine Ajax-Anfrage abgeschlossen ist.

Unten sehen 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 bekomme den Fehler unten, weil ich Rendering innerhalb der erledigten Methode meiner Ajax-Anfrage zurückgeben.

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, bis meine Ajax-Anfrage beendet ist, bevor mit dem Rendern begonnen wird?

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

1. Verschieben Sie die Ajax-Anforderung in das übergeordnete Element und rendern Sie die Komponente unter bestimmten Bedingungen:

   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. Behalten Sie die Ajax-Anforderung in der Komponente bei und rendern Sie während des Ladens bedingt etwas anderes:

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

Das grundlegende Beispiel für das asynchrone Rendern von Komponenten ist unten aufgeführt:

import React                from 'react';
import ReactDOM             from 'react-dom';        
import PropTypes            from 'prop-types';

export default class YourComponent extends React.PureComponent {
    constructor(props){
        super(props);
        this.state = {
            data: null
        }       
    }

    componentDidMount(){
        const data = {
                optPost: 'userToStat01',
                message: 'We make a research of fetch'
            };
        const endpoint = 'http://example.com/api/phpGetPost.php';       
        const setState = this.setState.bind(this);      
        fetch(endpoint, {
            method: 'POST',
            body: JSON.stringify(data)
        })
        .then((resp) => resp.json())
        .then(function(response) {
            setState({data: response.message});
        });
    }

    render(){
        return (<div>
            {this.state.data === null ? 
                <div>Loading</div>
            :
                <div>{this.state.data}</div>
            }
        </div>);
    }
}