Пожарная часть не отсоединяет слушателя от реакции

Question

Я создаю приложение чата с базой данных Firebase FireStore и Resatjs

Я пытаюсь использовать перехватчики реагирования для управления потоком данных, но у меня возникают проблемы с отключением прослушивателя 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()
  }
}

Эта ошибка, кажется, отсоединяет ранее подключенных слушателей. Как будто я открываю чат A , затем перехожу в чат B и чат A получает сообщение, оно вызывает переписывание сообщений.

Answer 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])