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

Posted 2023-02-16

【中文标题】React-Native Firestore - 获取评论部分的用户信息

【英文标题】：React-Native Firestore - Get user info for a comment section

【发布时间】：2022-01-16 12:13:34

【问题描述】：

我正在使用 react-native 和 react-native-firebase 构建应用程序，但在尝试实现评论部分时遇到了问题。

我的数据树目前是这样的： 集合(cmets)/doc(currentUser.uid)/collection(userComments)/doc(commentCreatorID)

在这个文档 commentCreatorID 中有我需要的所有数据。所以基本上是内容，时间戳......

对于这一部分，一切正常，但为了让评论创作者的信息与他的帖子保持一致，我需要在其他地方获取它们。 我这样做的方式是获取 doc(commentCreatorID)，因为它是该用户的 uid，并要求 firestore 在我的“用户”集合中向我提供具有相同 id 的文档中的数据。

这是我的代码：

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

这似乎不像现在那样有效。我的日志将一个空数组直接扔到我的脸上.. 我正确地抓取了每个评论，甚至每个用户的数据都对应于他们的 uid。 ForEach 完成后，我可以记录它们。 但由于某种原因，我无法将它们设置为我的状态 cmetsReady。

我错过了什么吗？

感谢您的宝贵时间

【问题讨论】：

setComments 是异步的，因此当您使用 cmets.forEach 时不会设置 cmets。

【参考方案1】：

useState 函数返回的设置器是异步的。将数据从一种状态复制到另一种状态也是一种反模式。尝试使用效果。

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