React-Native Firestore - 获取评论部分的用户信息

Question

I'm building an app using react-native and react-native-firebase and i'm running into an issue while trying to implement a comment section.

My tree of data is currently like that: collection(comments)/doc(currentUser.uid)/collection(userComments)/doc(commentCreatorID)

Within this doc commentCreatorID there is all the data i need. So basically the content, a timestamp...

For this part everything works perfectly but in order to havethe commentCreator's infos stick with his post, i need to grab them somewhere else. The way i do that is taking the doc(commentCreatorID), as it is the uid of this user and ask firestore to give me the data from the document with this same id within my "users" collection.

Here is my code:

  const [comments, setComments] = useState([])
  const [commentsReady, setCommentsReady] = useState([])

useEffect(() => {

        setComments([])
        setLoading(true)
        firestore()
        .collection('comments')
        .doc(auth().currentUser.uid)
        .collection('userComments')
        .get()
        .then((snapshot) => {
            let comments = snapshot.docs.map(doc => {
                const data = doc.data()
                const id = doc.id
                return {id, ...data}
            })
            setComments(comments)
        })
        .then(() => {
            comments.forEach(comment => {
                firestore()
                .collection("users")
                .doc(comment.id)
                .get()
                .then((snapshot) => {
                    const data = snapshot.data()
                    setCommentsReady({comments, ...data})       
                })
            })
        })
       console.log(commentsReady)
        setLoading(false)
    }, [handleScroll4])

This doesn't seem to works well as for now. My log throw an empty array right into my face.. I'm grabbing each comment correctly tho and even each user's data corresponding to their uids. I can log them once ForEach have been done. But for some reason i can't have them set to my state commentsReady.

Did i miss something?

Thanks for your time

Answer 1

The setters that the useState function returns are async. Copying data from one state to another is also an antipattern. Try using effects.

const TT = () => {
  const [comments, setComments] = useState([]);
  const [userInfos, setUserInfos] = useState([]);

  const commentsView = comments.map(comment => {
    // Reactively merge each comment with the appropriate user info
  });

  useEffect(() => {
    firestore()
    .collection('comments')
    .doc(auth().currentUser.uid)
    .collection('userComments')
    .get()
    .then((snapshot) => {
        let comments = snapshot.docs.map(doc => {
            const data = doc.data()
            const id = doc.id
            return {id, ...data}
        });
        setComments(comments);
    });
  }, []);

  useEffect(async () => {
    // Maybe keep a cache of fetched user datas, but not sure how this is architected
    const snapshots = await Promise.all(comments.map(comment => {
      return firestore()
      .collection("users")
      .doc(comment.id)
      .get();
    }));
      setUserInfos(snapshots.map(snap => snap.data()));
    }, [comments]);
};