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

【问题标题】：React-Native Firestore - Get user info for a comment sectionReact-Native Firestore - 获取评论部分的用户信息
【发布时间】：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。

标签： javascript firebase react-native google-cloud-firestore

【解决方案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]);
};

【讨论】：