具有回调功能的作用域

Question

我下面有一个if语句的一部分，它对Facebook和instagram进行了一些API调用。我在获取其中的“ instagram”部分以将数据推送到数组时遇到了麻烦。我认为这是一个范围问题，但不确定-也许您可以告诉我为什么我什么也没推送到数组中。评论说明发生了什么。我无法将instagram帖子推送到instaFormattedPosts数组。

else if(responseData.fbData && responseData.fbData.instaId){
            //First Get Fb Posts - I push them into this array, 'fbFormattedPosts' then use thatlater to update state. This one works, fbPost object gets pushed forEach() fbPosts.data response. 
            let fbFormattedPosts = []
            response = await fetch(`https://graph.facebook.com/${fbDataTemp.pageId}/feed?access_token=${fbDataTemp.pageAccessTokenLong}`)
            let fbPosts = await response.json()
            fbPosts.data.forEach(post => {
                if(post.message){
                    let fbPostObject = {
                        type: 'text',
                        data: post.message,
                        link: `http://www.facebook.com/${post.id}`,
                        date: post.created_time,
                        postId: post.id,
                        rockOn: []
                    }
                    fbFormattedPosts.push(fbPostObject)
                }
            })

            //Get IG Media Ids - This returns a list of instagram id's. 
            let instaFormattedPosts = []
            response = await fetch(`https://graph.facebook.com/v7.0/${fbDataTemp.instaId}/media?access_token=${fbDataTemp.pageAccessTokenLong}`)
            let instaPosts = await response.json()

            //Get IG Posts - Alright here is where I cant get the instaPostObject to push to isntaFormattedPosts array...
            instaPosts.data.forEach(async instaId => {
                const instaResponse = await fetch(`https://graph.facebook.com/${instaId.id}?fields=id,media_url,timestamp,username&access_token=${fbDataTemp.pageAccessTokenLong}`)
                let instaPostRendered = await instaResponse.json()

                let instaPostObject = {
                    type: 'instagram',
                    data: instaPostRendered.media_url,
                    link: `http://www.instagram.com/${instaPostRendered.username}`,
                    date: instaPostRendered.timestamp,
                    postId: instaPostRendered.id,
                    rockOn: [],
                }
                instaFormattedPosts.push(instaPostObject)
                console.log(instaPostObject) //Returns the object with the right details.
            })

            console.log(instaFormattedPosts) // returns empty array.. 


            //Set All Posts 
            setPosts([ 
                ...responseData.posts, 
                ...fbFormattedPosts
                   .filter(({postId}) => 
                      !responseData.posts
                         .find(post => post.postId == postId)),
               ...instaFormattedPosts
             ])
        }

Answer 1

[async await不能与forEach一起使用，它只会调用

// this will just loop through all the data inside and instaPosts
// and not wait to complete inside block

instaPosts.data.forEach(async instaId => {
    // your code
    instaFormattedPosts.push(instaPostObject)
    console.log(instaPostObject) //Returns the object with the right details.
})

解决方案：循环很简单

for (let i=0 ; i< instaPosts.data.length ; i++) {
    const instaId = instaPosts.data[i];
    const instaResponse = await fetch(`https://graph.facebook.com/${instaId.id}?fields=id,media_url,timestamp,username&access_token=${fbDataTemp.pageAccessTokenLong}`)
    let instaPostRendered = await instaResponse.json()

    let instaPostObject = {
        type: 'instagram',
        data: instaPostRendered.media_url,
        link: `http://www.instagram.com/${instaPostRendered.username}`,
        date: instaPostRendered.timestamp,
        postId: instaPostRendered.id,
        rockOn: [],
    }
    instaFormattedPosts.push(instaPostObject)
    console.log(instaPostObject) //Returns the object with the right details.
}
console.log(instaFormattedPosts) // <---- CHECK NOW