reagieren wählen async Option,

Question

Ich versuche this component mit den Async-Optionen mit es5 zu verwenden. Ich habe einen Service-Aufruf in meinem componentDidmount, die die Schulen Array mit einem Callback-Sets:

componentDidMount: function(){ 

    SchoolsDataService.getSchools(
     this.setSchoolsState 
    ); 

, die die Schulen Liste der Zustandsmatrix setzt

setSchoolsState: function(data){ 

    this.setState({schools: data.schools}) 

}, 

Service:

getSchools: function (callback) { 

    var url = 'xxxx'; 

    request 
     .get(url) 
     .set('Accept', 'application/json') 
     .end(function (err, res) { 
      if (res.ok) { 
       var data = res.body; 
       if (data) { 
        callback(data); 
       } 
      } 
     }); 
} 

Wie kann ich das anhand des Beispiels in der Dokumentation einrichten? Wo würde ich den Service-Aufruf für die Async-Version so setzen und die Optionsliste generieren?

var getOptions = function(input, callback) { 
setTimeout(function() { 
    callback(null, { 
     options: [ 
      { value: 'one', label: 'One' }, 
      { value: 'two', label: 'Two' } 
     ], 
     // CAREFUL! Only set this to true when there are no more options, 
     // or more specific queries will not be sent to the server. 
     complete: true 
    }); 
}, 500); 
}; 

MY-Komponente wird unter Verwendung gemacht:

<Select.Async 
     name="form-field-name" 
     value="one" 
     loadOptions={getOptions}/> 

ich diesen Fehler:

Uncaught unveränderliche Verletzung: Elementtyp ist ungültig: eine Zeichenfolge (für eingebaute Komponenten) zu erwarten oder einem Klasse/Funktion (für zusammengesetzte Komponenten), aber erhalten: undefiniert. Überprüfen Sie die Rendermethode TableModalComponent.

Ich habe es ganz oben auf meiner Seite:

Select = require('react-select'), 

Answer 1

Ich glaube, Sie haben 2 verschiedene Möglichkeiten:

Entweder Sie mit Ihrem Service-Aufruf in componentDidMount bleiben die lokalen Zustand aktualisiert, und dann Sie brauchen keine async-Optionen, da Sie options = {this.state.schools} direkt an die select-Komponente übergeben können.

Oder Sie benötigen keinen lokalen Status (und auch keinen componentDidMount-Serviceaufruf), weil Sie Führen Sie den Service-Anruf direkt in Ihren getOptions f (für eine Async-Optionen-Auswahlkomponente):

var getOptions = function(input, callback) { 
    setTimeout(function() { 
     SchoolsDataService.getSchools(function(data) { 
      callback(null, { 
       options: data.schools, 
       complete: true, 
      }); 
     }); 
    }, 500); 
};