Как удалить функцию обратного вызова стрелки Javascript EventEmiiter - PullRequest
Новая
       41

Как удалить функцию обратного вызова стрелки Javascript EventEmiiter

0 голосов
/ 09 февраля 2019

Мой код React продолжает вызывать обратные вызовы EventEmitter, которые должны были быть удалены.Когда я проверял свой класс React, который расширяет EventEmiiter, я обнаружил, что обратные вызовы все еще присутствуют в полях 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);
  }
}

Можно было бы исправить это с закрытием, но я думаю, что это излишне.

Ответы [ 2 ]

0 голосов
/ 10 февраля 2019

Это было простое исправление, которое я должен был поймать ранее.Решение замыкания, которое разместил Алексей, также сработало бы, но все, чего не хватало, это связать * _onFirebaseChange * с этим в конструкторе.

Итак, в конструкторе моего класса React я добавилэта строка: 

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

Тогда моя функция componentDidMount смогла обратиться к тому же обратному вызову, что и componentWillUnmount , и в то же время получить доступ к this.состояние . 

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

  componentWillUnmount() {
    FirebaseStore.removeChangeListener(this._onFirebaseChange);
  }
0 голосов
/ 09 февраля 2019

Обновите ваш метод componentDidMount. 

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

Функция должна быть напрямую связана.

...