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