如何從功能組件中的另一個 function 調用 Firestore 取消訂閱 function？

Question

我有以下 function 單擊即可運行。 它基本上啟動了一個 Firestore 偵聽器來獲取消息。 它還有一個取消訂閱 function 聲明，我試圖從另一個 function 調用它：

const getMessages = (uid) => {

        const ref = firebase.firestore().collection('Chats').doc(uid).collection('Messages');

        const query = ref.where("uid", "==", uid).orderBy('timestamp', 'desc').limit(25);  



      const unsubFromMessages = query.onSnapshot((snapshot) => {

                            if (snapshot.empty) {

                                console.log('No matching documents.');                                
                                
                            }
                                                  
                                snapshot.docChanges().forEach((change) => {
                                   
                                    
                                if (change.type === 'removed') {
                    
                                console.log(change.doc.data().content)
                    
                                } else if (change.type === 'added') {                
                                
                                 
                                    setMessages(prevFiles => ([...prevFiles, {
                                    id: change.doc.id, body: change.doc.data()
                                        }]))                          
                                    
                                // setTimeout( this.scrollToBottom(), 2000)
                                
                                }
                    
                                
                                });
                                }, (error) => {console.log(error)});             

   }

正如您在其中看到的，我聲明了一個 function 以取消訂閱 Firestore 偵聽器（const unsubFromMessages = query.onSnapshot）。 我希望能夠調用這個“unsubFromMessages”function 在另一個按鈕單擊另一個 function 基本上關閉聊天。

這是closeChat function：

const closeChat = () => {    
    setMessages([]);
    unsubFromMessages();        
}

不幸的是，closeChat function 無法訪問 unsubFromMessages function 以取消訂閱 Firestore 偵聽器。 我收到以下錯誤：

Line 177:5:  'unsubFromMessages' is not defined  no-undef

我知道如何在 class 組件中執行此操作，我只需將 function 聲明為 this.unsubFromMessages =...，然后從任何其他 ZC1C425268E68385D1AB5074C17A94F14 組件中調用它，但無法在功能性組件中調用它。 請指教。

Answer 1

您可以將unsubFromMessages回調存儲在 React ref 中並在另一個單擊處理程序中訪問它。

const unsubFromMessagesRef = React.useRef();

...

const getMessages = (uid) => {
  ...
  const unsubFromMessages = query.onSnapshot((snapshot) => { ..... };

  unsubFromMessagesRef.current = unsubFromMessages;

  ...
}

...

const closeChat = () => {    
  setMessages([]);
  unsubFromMessagesRef.current && unsubFromMessagesRef.current();        
}

當組件卸載時不要忘記取消訂閱：

useEffect(() => {
  return () => {
    unsubFromMessagesRef.current && unsubFromMessagesRef.current()
  };
}, []);