ComponentWillUnmount从Firestore退订

时间:2019-04-29 14:42:32

标签: reactjs firebase google-cloud-firestore

我正在尝试使用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();

但是,我无法访问此unsubscribe();因为它是在ComponentWillMount内部声明的,因此我需要在ComponentWillUnmount中使用它。

如何在ComponentWillUnmount中使用此unsubscribe()?如果我尝试将其保存在状态内,则会引发一个错误,指出取消订阅不是函数。

  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 个答案:

答案 0 :(得分:1)

您可以将取消订阅的引用保存在类实例(this)上:不用做var unsubscribe来做this.unsubscribe = [...],而是稍后再次从类实例中读取它:{{1} }

this.unsubscribe()