具有回调函数的范围

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循环

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

具有回调函数的范围

Scope with callback function

javascript

foreach

scope

push

reactjs