ReactJS

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

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 默认不绑定context，需要自己绑定。在您的示例中，这指的是回调函数，而不是反应对象。您可以将反应上下文分配给变量并在回调中使用它，或者将上下文直接绑定到回调。

这里 the great article 解释了 JavaScript

中的上下文

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

class SomeComponent extends React.Component {

  updateBasketTotal() {
    ....
  }

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

}

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

Answer 2

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

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

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

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

ReactJS - this.functionname 不是函数

ReactJS - this.functionname is not a function

javascript

this