ComponentWillUnmount, чтобы отписаться от Firestore - PullRequest
0 голосов
/ 29 апреля 2019

Я пытаюсь использовать ComponentWillUnmount, чтобы прекратить прослушивание изменений коллекции Firebase Firestore:

https://firebase.google.com/docs/firestore/query-data/listen#detach_a_listener

var unsubscribe = db.collection("cities")
    .onSnapshot(function (){
      // Respond to data
      // ...
    });

// Later ...

// Stop listening to changes
unsubscribe();

Однако я не могу получить доступ к этой отписке ();так как он объявлен внутри ComponentWillMount, и мне нужно использовать его в ComponentWillUnmount.

Как я могу использовать эту функцию unsubscribe () внутри ComponentWillUnmount?Если я пытаюсь сохранить его в состоянии, выдается ошибка, что отписка не является функцией.

  constructor() {
    super();
    this.state = {
      notes: [],
      unsubscribe: null
    };
    this.getNotes = this.getNotes.bind(this);
  }

  componentDidMount(){
    this.getNotes();
  }

  componentWillUnmount(){
    var unsubscribe = this.props.unsubscribe;
    unsubscribe();
  }

  getNotes = () => {
    const db = this.props.firestore;
    const colRef = db.collection("users").doc(this.props.uid)
    .collection("notes");

    let notes = [];
    const that = this;

    // Realtime updates listener
    var unsubscribe = colRef.orderBy("timestamp", "asc")
    .onSnapshot(function(querySnapshot) {
        var notes = [];
        querySnapshot.forEach(function(doc) {
            notes.push(
              { id: doc.id,
                body: doc.data().body}
                );
        });
        that.setState({ notes })
    });

    this.setState({ unsubscribe })
  }

Броски:

Uncaught TypeError: unsubscribe is not a function

1 Ответ

1 голос
/ 29 апреля 2019

Вы можете сохранить ссылку отмены подписки на экземпляре класса (this): вместо того, чтобы делать var unsubscribe do this.unsubscribe = [...], а затем просто снова прочитать его из экземпляра класса: this.unsubscribe()

componentDidMount(){
  this.getNotes();
}

componentWillUnmount(){
  this.unsubscribe();
}

getNotes = () => {
  const db = this.props.firestore;
  const colRef = db.collection("users").doc(this.props.uid)
  .collection("notes");

  let notes = [];
  const that = this;

  // Realtime updates listener
  this.unsubscribe = colRef.orderBy("timestamp", "asc")
  .onSnapshot(function(querySnapshot) {
      var notes = [];
      querySnapshot.forEach(function(doc) {
          notes.push(
            { id: doc.id,
              body: doc.data().body}
              );
      });
      that.setState({ notes })
  });
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...