Question

我的React代码不断触发应已删除的EventEmitter回调。当我检查扩展EventEmiiter的React类时，我发现在 events 字段中仍然存在回调，即使已经在这些回调上调用了 removeListener 。

我怀疑这是因为我将回调函数作为箭头函数添加到了EventEmitter中，但是当我删除它们时，却没有。删除它们作为箭头功能不起作用。在下面的代码中，FirebaseStore扩展了EventEmitter：

  _onFirebaseChange() {
    this.setState({
      refId: this.getRefId()
    });
  }

  componentDidMount() {
    FirebaseStore.addChangeListener(() => this._onFirebaseChange());
  }

  componentWillUnmount() {
    FirebaseStore.removeChangeListener(this._onFirebaseChange);
  }

我需要使用箭头功能，因为更改事件（ _onFirebaseChange ）需要访问 this.state 。

当我从Chrome开发者工具查看源代码时，很难确定 addChangeListener 和 removeChangleListener 是否引用同一回调：

key: 'componentDidMount',
value: function componentDidMount() {
  var _this2 = this;

  _FirebaseStore2.default.addChangeListener(function () {
    return _this2._onFirebaseChange();
  });
}
},{
key: 'componentWillUnmount',
value: function componentWillUnmount() {
  _FirebaseStore2.default.removeChangeListener(this._onFirebaseChange);
}}

这是Firebase商店中的相关代码：

addChangeListener(callback) {
    this.on(FIREBASE_CHANGE_EVENT, callback);
  }

  removeChangeListener(callback) {
    this.removeListener(FIREBASE_CHANGE_EVENT, callback);
  }
}

有可能通过关闭来解决此问题，但我认为这太过分了。

Answer 1

更新您的componentDidMount方法。

componentDidMount() {
   FirebaseStore.addChangeListener(this._onFirebaseChange);
}

该功能需要直接绑定。

Answer 2

这是一个简单的修复程序，我应该早就发现了。 Alexi发布的关闭解决方案也可以使用，但是所缺少的只是将* _onFirebaseChange *绑定到构造函数中的 this 。

因此，在我的React类的构造函数中，我添加了以下行：

this._onFirebaseChange = this._onFirebaseChange.bind(this);

然后，我的 componentDidMount 函数能够引用与 componentWillUnmount 相同的回调，同时还能够访问 this.state 。 / p>

  componentDidMount() {
    FirebaseStore.addChangeListener(this._onFirebaseChange);
  }

  componentWillUnmount() {
    FirebaseStore.removeChangeListener(this._onFirebaseChange);
  }

如何删除Javascript EventEmiiter箭头函数回调

2 个答案: