如何在状态下设置监听器？

Posted 2023-02-16

【中文标题】如何在状态下设置监听器？

【英文标题】：How to set listener in the state?

【发布时间】：2022-01-05 11:01:44

【问题描述】：

我有一个 Firestore onSnapshot 监听器来监听文档的变化，但如果我将它设置为如下状态，我似乎无法理解它是如何工作的：

constructor(props) 
 super(props);         
 this.fetchChatsListener = null;
 

我就是这样设置的：

this.fetchChatsListener = firestore().collection('chats').doc(documentSnapshot.id).collection('messages').where('created', '>=', currenttime);
this.state.sent_message_id != '' ? this.fetchChatsListener.where(firebase.firestore.FieldPath.documentId(), '!=', this.state.sent_message_id) : ''
  this.fetchChatsListener.orderBy('created', 'desc')
    .onSnapshot(
      error: (e) => console.error(e),
      next: (querySnapshot_) => 

        querySnapshot_.docChanges().forEach(change => 
          this.state.dataSource.push(
            ...change.doc.data(),
            key: change.doc.id,
          );
        );

        this.setState(
          chatEntered: true,
          dataSource: this.state.dataSource,
          refreshingMessages: false,
          current_chat_id: documentSnapshot.id
        );

      ,
    );

我调用这个函数来取消订阅：

unsubscribe_chats_listener() 
  this.fetchChatsListener;
  this.fetchChatsListener = null;

但不幸的是，它没有取消订阅，因为我不断收到新的更改。

更新

当我尝试使用以下方式取消订阅时：

this.fetchChatsListener();

失败并出现此错误：

TypeError: this.fetchChatsListener is not a function

【参考方案1】：

OP代码只提到了取消订阅功能，需要调用它。

unsubscribe_chats_listener() 
  this.fetchChatsListener();  // note the parens, causing invocation
  this.fetchChatsListener = null;

编辑

this.fetchChatsListener 正在初始化为查询。查询不是取消订阅功能。

this.fetchChatsListener = firestore().collection('chats') // a collection ref
.doc(documentSnapshot.id)  // a doc ref
.collection('messages')    // a collection ref
.where('created', '>=', currenttime);  // a query

onSnapshot() 返回取消订阅函数，所以在此处设置属性...

let query = firestore().collection('chats')
  .doc(documentSnapshot.id)
  .collection('messages')
  .where('created', '>=', currenttime);

  this.state.sent_message_id != '' ? query.fetchChatsListener.where(firebase.firestore.FieldPath.documentId(), '!=', this.state.sent_message_id) : ''
  
  query.orderBy('created', 'desc')
  this.fetchChatsListener = query.onSnapshot(  // an unsubscribe function
      error: (e) => console.error(e),
      next: (querySnapshot_) => 
      // ...

【讨论】：

我确实尝试过，但它失败了，因为那不是一个函数：'TypeError: this.fetchChatsListener is not a function'

你能在你初始化它的地方发布完整的行吗？ this.fetchChatsListener = ....

是的，检查我更新的问题。

@showtime - 这是一个有用的编辑。取消订阅函数的获取方式是从 onSnapshot 的返回值。查看我的编辑

谢谢！我没有在文档的任何地方读到它。如果您能在 firebase 指出的地方向我们提供参考，那就太好了。'