如何等待 forEach 循环完成

如何解决如何等待 forEach 循环完成

我在尝试获取数据时遇到问题。不幸的是，当我控制台记录结果时，在初始页面加载时，数据为空。然而，当我重新渲染组件时，我成功接收到数据。

这是我目前拥有的：

function Followers({
   urlname,navigation
}) {
    const [followersData,setfollowersData] = useState(null)

    useEffect(() => {
         // Fetch Followers data
         const dataRef = firestore().collection('usernames')
     
            dataRef.doc(urlname)
            .collection('Following')
            .get()
            .then((docSnapshot) => {
            let items = []

            docSnapshot.forEach(doc => {
                let item = {}

                // Store followers,display name and follows info
                dataRef
                .doc(doc.id)
               .get()
                .then((followerDoc) => {
                    const data = followerDoc.data();
                    item.profileName = doc.id
                    item.displayName = data.userName
                    item.followerCount = data.followers
                    item.followingCount = data.following
                })

                items.push(item)
            })
            setfollowersData(items)
            })

    },[])

return (
    <>
        {console.log('followersData',followersData)}
    </>
)
}

export default Followers

我在第一页加载时收到的控制台日志是：

followersData null
followersData [{},{},{],{}]
followersData [{},{}]

当组件再次呈现时，我在控制台日志中收到此信息：

followersData [all my data in 4 different objects gets logged]

解决方法

使用 prev state 为每个 item 分别调用 setfollwersData() 并设置初始状态为空数组。

function Followers({
   urlname,navigation
}) {
    const [followersData,setfollowersData] = useState([])

    useEffect(() => {
         // Fetch Followers data
         const dataRef = firestore().collection('usernames')
     
            dataRef.doc(urlname)
            .collection('Following')
            .get()
            .then((docSnapshot) => {

            docSnapshot.forEach(doc => {
                let item = {}

                // Store followers,display name and follows info
                dataRef
                .doc(doc.id)
               .get()
                .then((followerDoc) => {
                    const data = followerDoc.data();
                    item.profileName = doc.id
                    item.displayName = data.userName
                    item.followerCount = data.followers
                    item.followingCount = data.following
                    setfollowersData(prev => [...prev,item])
                })

            })
        })

    },[])

return (
    <>
        {console.log('followersData',followersData)}
    </>
)
}

export default Followers

,

William 的解决方案很好，但作为一种选择，等待所有响应并更新一次状态。

const promises = [];

docSnapshot.forEach((doc) => {
  const promise = dataRef
    .doc(doc.id)
    .get()
    .then((followerDoc) => {
      const data = followerDoc.data()

      return {
        profileName: doc.id,displayName: data.userName,followerCount: data.followers,followingCount: data.following,}
    });

   promises.push(promise);
})

Promise.all(promises).then(setfollowersData);