javascript - ReactJS - this.functionname 不是函数

Question

我的 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？

我认为这是“this”的问题，但不确定如何解决。提前致谢

更新:

已尝试将 bind() 添加到监听器:

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

但是没有快乐，有什么想法吗？

Answer 1

我假设您的组件正在取消订阅 componentWillUnmount 中的那些 channel ，以避免资源泄漏和重复订阅。

异步回调应该调用 isMounted 以确保组件在尝试任何其他操作之前仍处于挂载状态。

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

我不知道 isMounted 检查是否能解决您的问题，因为它可能也不再是一个函数。如果不是，您可以考虑添加自己的属性来跟踪组件是否已安装并检查是否调用函数。