ReactJS - this.functionname不是一个函数(ReactJS - this

我在我的componentDidMount监听器设置：

updateBasketTotal: function() {
    BasketService.getBasketTotal(function(data){
        this.setState({
            selectedPeopleCount: data.TotalMembers
        });
    }.bind(this));
},

componentDidMount: function() {
    this.updateBasketTotal();
    this.subscribeToChannel(basketChannel,"selectAll",this.listenerSelectAll);
    this.subscribeToChannel(basketChannel,"removePersonFromBasket",this.listenerRemovePersonFromBasket);
    this.subscribeToChannel(basketChannel,"addPersonToBasket",this.listenerAddPersonToBasket);
    this.subscribeToChannel(basketChannel,"addArrayToBasket",this.listenerAddArrayToBasket);
},

listenerAddArrayToBasket: function(data){
    BasketService.addPerson(data.arrayToPush,function(){
        this.updateBasketTotal();
    });
},
listenerAddPersonToBasket: function(data){
    BasketService.addPerson(data.personId,function(){
        this.updateBasketTotal();
    });
},
listenerRemovePersonFromBasket: function(data){
    BasketService.removePerson(data.personId,function(){
       this.updateBasketTotal();
    });
},
listenerSelectAll: function(data){
    BasketService.selectAll(data.selectAll, function () {
        this.updateBasketTotal();
    });
}

但是，如果我发布一条消息时，我无法在此页面上，我得到一个错误：

this.updateBasketTotal不是一个函数

谁能告诉我怎样才能使用this.updateBasketTotal？

我认为它是一个问题，“这个”，但不知道如何解决它。 提前致谢

更新：

已经尝试添加绑定（）来监听器：

    listenerAddPersonToBasket: function(data){
    BasketService.addPerson(data.personId,function(){
        this.updateBasketTotal();
    }.bind());
},

但是，没有快乐，任何想法？

Answer 1:

我假设你的组件退订这些渠道componentWillUnmount以避免资源泄漏和重复订阅。

异步回调应该调用isMounted以确保元件仍在试图安装之前别的。

BasketService.selectAll(data.selectAll, function () {
    if (this.isMounted()) {
        this.updateBasketTotal();
    }
}.bind(this));

我不知道，如果isMounted检查将解决你的问题，因为这也可能不是一个功能了。 如果不是的话，你可以考虑加入你自己的财产来跟踪组件是否被安装与否和检查，而调用一个函数。

Answer 2:

listenerAddArrayToBasket: function(data) {
    var _this = this;
    BasketService.addPerson(data.arrayToPush,function() {
        _this.updateBasketTotal();
    });
}

要么

listenerAddArrayToBasket: function(data) {
    BasketService.addPerson(data.arrayToPush,function() {
        this.updateBasketTotal();
    }.bind(this));
}

反应默认不绑定上下文，你必须自己做。 在您的例子，这会是指回调函数，还没反应过来的对象。 您可以分配反应方面的变量，直接使用你的回调中，或结合上下文回调。

这里是伟大的文章解释JavaScript上下文

此外，在ES6有可能使用双箭头声明

class SomeComponent extends React.Component {

  updateBasketTotal() {
    ....
  }

  lisneterAddArrayToBasket() {
    BasketService.addPerson(data.arrayToPush, () => {
      this.updateBasketTotal()
    })
  }

}

您可以使用通天编译器ES6代码旧平原ES5 :)

文章来源: ReactJS - this.functionname is not a function