如何在ReactJS中为getMyInfo函数集成onSnapshot实现实时更新？

Got it, let's tweak your getMyInfo function to leverage Firestore's onSnapshot instead of the one-time get() call—this way you'll get real-time updates while keeping the limit(8) filter. Here's the step-by-step implementation:

Updated getMyInfo Function with Real-Time Listening #

getMyInfo = () => {
  // Store the unsubscribe function to clean up later
  this.unsubscribe = db.collection("Cities")
    .limit(8)
    .onSnapshot((snapshot) => {
      if (!snapshot.empty) {
        let AllCities = [];
        snapshot.docs.forEach((doc) => {
          const city = {
            id: doc.id, // Fixed: store the document ID instead of the entire snapshot object
            ...doc.data(),
          };
          AllCities.push(city);
        });
        this.setState({
          cities: AllCities,
          isLoaded: true // Combine state updates into one call for simplicity
        });
      } else {
        // Handle empty collection case to avoid stale state
        this.setState({ cities: [], isLoaded: true });
      }
    }, (error) => {
      // Optional: Handle listener errors (e.g., permission issues)
      console.error("Error listening to Cities collection:", error);
      this.setState({ isLoaded: true });
    });
};

Critical Cleanup Step (Prevent Memory Leaks) #

Since onSnapshot creates a persistent listener, you need to unsubscribe when your component unmounts to avoid memory leaks and unnecessary updates. Add this lifecycle method to your component:

componentWillUnmount() {
  // Check if the unsubscribe function exists before calling it
  if (this.unsubscribe) {
    this.unsubscribe();
  }
}

Key Notes: #

• Real-Time Triggers: The onSnapshot callback runs on initial load and every time the first 8 documents in the Cities collection change (additions, updates, deletions).
• Fixed ID Logic: I corrected id: doc to id: doc.id—your original code was storing the entire DocumentSnapshot object as the ID, which is almost certainly not what you intended.
• Simplified State Updates: You don't need nested setState calls; you can update both cities and isLoaded in a single state change.
• Error Handling: Added an optional error handler to catch issues with the listener (like missing Firestore permissions).

内容的提问来源于stack exchange，提问作者Papucho