リアクションsetStateはajaxで再レンダリングされません

Question

ajax関数で状態を設定できません。 ajax呼び出しがループされ、繰り返しごとにコンポーネントがレンダリングされ、そのすべてが配列に追加されます。この配列は、私のコンポーネントの状態を設定するために使用されます、そして、私はthis.state.toRenderをDOMに現れるJSX戻り値として返します。

var self = this; 
$.ajax({ 
    success: function(data) { 
    // generate array of objects 
    self.setState({toRender: renderArray}); 

JSは値渡しであるため、var selfのsetStateは使用しないでください。どういうわけか、状態を変更するためにajax呼び出しの代わりにコンポーネントを指す必要があります。約束は、生成された配列へのアクセスを持っていないようだ、私はコールバックを使用して結果を得ていない。

最初の状態は実際にはajax関数を通り抜け、私が望むものを正確に返しますが、状態を更新する予定のイベント（DropDown選択）は変更されません。

子コンポーネントが親の見返りに呼び出されます。

<DropDown newSelect={this.ajaxCall.bind(this)} /> 

そして、私はこの機能を追加した子コンポーネントで：

pick : function(event) { 
    var selected = event.target.value; 
    this.setState({list: "all"}, this.props.newSelect('theUrl')); 

私は私がしましたので、ドロップダウン選択が働くことを知っていますプロジェクトの初期段階でそれをうまく使用しました。

Answer 1

var self = this; 

あなたのコンポーネントを反応させること「成功」コールバック関数をバインドない限り、上記の行は、ここで反応は動作しません。

したがって、これは動作します：

$.ajax({ 
    success: function(data) { 
    // generate array of objects 
    this.setState({toRender: renderArray}); 
    }.bind(this) 
}); 

Answer 2

この

$.ajax({ 
    success: (data) => { 
    // generate array of objects 
    this.setState({toRender: renderArray}); 
} 
}) 

を使用します