firestore 没有通过反应分离侦听器答案

【问题标题】：firestore not detaching listener with reactfirestore 没有通过反应分离侦听器
【发布时间】：2020-01-31 05:47:16
【问题描述】：

我正在使用 firebase firestore 数据库和 reactjs 构建一个聊天应用

我正在尝试使用 react 挂钩来管理数据流，但在分离 firestore 侦听器时遇到了问题。

这个使用效果是我初始化监听器的地方。

useEffect(() => {
    setMessages(null)

    roomId && listenForMessages(roomId, setMessages, false, scrollToBottom)
    return () => {
      if (active && setMessages) {
        //Detach here
        listenForMessages(roomId, setMessages, true)
      }
    }
  }, [roomId ])

这是我的监听函数

export const listenForMessages = (roomId, setMessages, detach, scrollToBottom) => {
  let listener = db
    .collection('chats')
    .doc(roomId)
    .collection('messages')
    .orderBy('timestamp')
    .onSnapshot(
      docSnapshot => {
        let data = []
        docSnapshot.docs.forEach(doc => data.push({ id: doc.id, ...doc.data() }))
        setMessages(data)
        scrollToBottom()
      },
      err => {
        console.log(`Encountered error: ${err}`)
      }
    )
  if (detach === true) {
    listener()
  }
}

此 dosnt 似乎分离了以前附加的侦听器。好像我打开聊天室 A 然后导航到聊天室 B 并且聊天室 A 收到一条消息，它会调用写消息。

【问题讨论】：

标签： reactjs firebase google-cloud-firestore

【解决方案1】：

这最终可以工作，但如果有人可以重组它，请告诉我，它不是很干净。

我发现初始代码正在关闭监听器，但再次调用 listenForMessages() 函数来关闭它正在打开另一个监听器。

useEffect(() => {
    setMessages(null)
    let listener
    if (active) {
      listener = db
        .collection('chats')
        .doc(active)
        .collection('messages')
        .orderBy('timestamp')
        .onSnapshot(
          docSnapshot => {
            let data = []
            docSnapshot.docs.forEach(doc => data.push({ id: doc.id, ...doc.data() }))
            setMessages(data)
            scrollToBottom()
          },
          err => {
            console.log(`Encountered error: ${err}`)
          }
        )
    }
    return () => {
      if (active) {
        listener()
      }
    }

    //eslint-disable-next-line
  }, [active])

【讨论】：