首页 文章

React setState不会在ajax成功时重新渲染

提问于
浏览
2

我在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选择有效,因为我已经在项目的早期阶段成功使用了它 .

2 回答

  • 2

    您需要使用箭头函数来绑定 this 对象,因为 function 语法是较旧的es5语法,它不适用于es6

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

    上面的行在React中不起作用,除非你_118617_回调函数的"success"回调函数 .

    因此,这将工作:

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

相关问题