ReactJS - this.functionname 不是函数答案

【问题标题】：ReactJS - this.functionname is not a functionReactJS - this.functionname 不是函数
【发布时间】：2015-07-31 07:50:39
【问题描述】：

我的 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());
},

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

【问题讨论】：

你可以在listenerAddArrayToBasket 添加你的听众时做(function(){this.updateBasketTotal();}.bind(this)) ...你对updateBasketTotal 做了同样的事情

标签： javascript reactjs this

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案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));
}

React 默认不绑定上下文，你必须自己做。在您的示例中，这将指的是回调函数，而不是反应对象。您可以将反应上下文分配给变量并在回调中使用它，也可以将上下文直接绑定到回调。

这里是 the great article 解释 JavaScript 中的上下文

在 ES6 中也可以使用双箭头声明

class SomeComponent extends React.Component {

  updateBasketTotal() {
    ....
  }

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

}

您可以使用 babel 将您的 ES6 代码编译为旧的普通 ES5 :)

【讨论】：