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

我知道DropDown选择有效，因为我已经在项目的早期阶段成功使用了它。

Answer 1

var self = this;

除非你绑定＆＃34;成功＆＃34;以上这一行在React中不起作用。回调函数到你的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});
}
})