React setState不會在Ajax成功中重新呈現

Question

我無法在ajax函數中設置狀態。 一個ajax調用被循環，並且對於每次迭代，呈現一個組件，所有組件都被添加到數組中。 該數組將用於設置組件的狀態，然后返回this.state.toRender作為JSX返回值，該返回值將顯示在DOM上。

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

由於JS按值傳遞，所以我不應該set var self的狀態，對嗎？ 我需要以某種方式指向組件而不是ajax調用來更改狀態。 一個promise似乎沒有訪問生成的數組的權限，並且我沒有使用回調獲得結果。

初始狀態實際上通過ajax函數並返回我想要的內容，但是應該更新狀態的事件（DropDown選擇）不會進行任何更改。

在父級的返回中調用子級組件：

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

在子組件中，我添加了以下功能：

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

我知道DropDown選擇有效，因為我已經在項目的早期階段成功使用了它。

Answer 1

var self = this;

除非您將 “成功”回調函數綁定到您的React Component，否則上面的行在React中將不起作用。

因此，這將起作用：

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

Answer 2

您需要使用箭頭函數來綁定this對象，因為function語法是較舊的es5語法，不適用於es6

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