2016-04-01 5 views
0

私はとes5を使って非同期オプションを使用しようとしています。react select asyncオプション、

componentDidMount: function(){ 

    SchoolsDataService.getSchools(
     this.setSchoolsState 
    ); 

状態配列

setSchoolsState: function(data){ 

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

}, 

は、サービスへの学校のリストを設定します:どのように

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

私は、コールバックを使用して、学校の配列を設定し、私のcomponentDidmountでサービスコールを持っていますドキュメントの例を使ってこれを設定できますか?このような非同期バージョンのサービスコールをどこに置いてオプションリストを生成すればよいですか?

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成分を使用してレンダリングされる:

キャッチされない不変違反:

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

私はこのエラーを取得するエレメント・タイプが無効である:(内蔵部品用)文字列またはAを期待クラス/関数(複合コンポーネント用)ですが、未定義です。レンダリング方法がTableModalComponentであることを確認します。

私は私のページの上部にそれを持っている:

Select = require('react-select'), 

答えて

2

私はあなたがここに2つの異なるオプションを持っていると思う:あなたはローカルの状態を更新componentDidMountであなたのサービスコールに滞在どちらか

、および

また、ローカルの状態(およびcomponentDidMountサービスコールも不要)が必要なため、非同期オプションは必要ありません。あなたのgetOptionsでサービスコールを直接行います。 (非同期オプション選択コンポーネントの場合):

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