React 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的狀態，對不對？不知何故，我需要指向組件而不是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}); 
} 
})