使用if语句进行提取-条件提取问题

Question

我正在开发的应用程序允许用户将facebook、instagram和youtube的社交媒体集成到我的应用程序中。一旦连接上，它就会从这些服务中拉出他们所有的帖子，并将其放到一个地方-我的应用程序。

例如..。用户可以单独连接facebook。或者用户可以将所有这三个连接起来。

问题是，如果它们全部连接起来，我的最新集成(youtube)不会将帖子添加到页面中。我之所以相信它，是因为我在React State中存储帖子的方式。

我下面的代码执行以下操作..它将原生帖子获取到我的平台上。然后，如果用户连接了youtube，它会获取youtube帖子并将它们添加到本地帖子中。在此之后，我有另一个if/else语句，如果用户连接了facebook或instagram，它会获取这些帖子，并将它们添加到所有帖子中。

发生的情况是，如果用户连接了所有这三个帖子，则已添加的获取的youtube帖子将被新的fb或instagram帖子覆盖。-我正在寻找关于如何编写代码的建议，以便它仍然有条件地获取youtube帖子，但不会在结束时覆盖它们。我也会在代码的注释中解释它是如何工作的。

我想我需要弄清楚如何让我的youtube帖子在更高的范围内，这样它们就不会被覆盖。

谢谢!

 const getPosts = async () => {
    const token = await getTokenSilently();

    try {
        //Get ODB/Native Posts
        let response = await fetch(`/api/autoquotegenerators/${_id}`, {
            headers: {
                Authorization: `bearer ${token}`,
                "Content-Type": "application/json; charset=UTF-8",
            }
        });
        const responseData = await response.json()
        setBand(responseData)
        setYoutube(responseData.youtube)
        setFavorites(responseData.favorites)
        setFbData(responseData.fbData)
        setGoogleData(responseData.googleData)
        if(!responseData.fbData){
            setPosts(responseData.posts)
        }

        //Get New Youtube Posts if the user connects Youtube.
        if(responseData.googleData){
            let apiKey = process.env.REACT_APP_GOOGLE_API

            //Get Youtube Uploads Playlist Id
            let response = await fetch(`https://www.googleapis.com/youtube/v3/channels?part=contentDetails&id=${responseData.googleData.channelId}&key=${apiKey}`)
            let playlistIdResponse = await response.json()
            let uploadsPlayListId = playlistIdResponse.items[0].contentDetails.relatedPlaylists.uploads

            //Get Videos from Uploads Playlist
            response = await fetch(`https://www.googleapis.com/youtube/v3/playlistItems?playlistId=${uploadsPlayListId}&key=${apiKey}&part=snippet&maxResults=50`)
            let videosResponse = await response.json()

            //Create Youtube Posts
            let youtubeFormattedPosts = []
            videosResponse.items.forEach(video => {
                let youtubeVideoObject = {
                    type: "video", 
                    data: video.snippet.resourceId.videoId, 
                    date: video.snippet.publishedAt, 
                    postId: video.id, 
                    rockOn: []
                }
                youtubeFormattedPosts.push(youtubeVideoObject)
            })

            //Set All Posts - This works, if no other apis get called.
            setPosts([ 
                ...responseData.posts, 
                ...youtubeFormattedPosts
                    .filter(({postId}) => 
                    !responseData.posts
                        .find(post => post.postId == postId)),
            ])
        }

        let fbDataTemp = responseData.fbData
        if(responseData.fbData && !responseData.fbData.instaId){
            //Get Only FB and ODB Posts
            //Get Fb Posts
            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.slice(0, -2) + ':' + post.created_time.slice(-2),
                        postId: post.id,
                        rockOn: []
                    }
                    fbFormattedPosts.push(fbPostObject)
                }
            })

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

        }else if(responseData.fbData && responseData.fbData.instaId){
            //First Get Fb Posts
            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.slice(0, -2) + ':' + post.created_time.slice(-2),
                        postId: post.id,
                        rockOn: []
                    }
                    fbFormattedPosts.push(fbPostObject)
                }
            })

            //Get IG Media Ids 
            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 
            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)
            }

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

我想我想解决这个问题的方法是使用var而不是let来定义在fetching之后保存posts的数组。然后立即设置AllPosts？

Answer 1

由于在函数中执行了多个setState调用，因此某些字段会被覆盖

解决方案是将所有posts保存在一个变量中，并在函数末尾触发一次setPosts

const getPosts = async () => {
    const token = await getTokenSilently();

    try {
        //Get ODB/Native Posts
        let response = await fetch(`/api/autoquotegenerators/${_id}`, {
            headers: {
                Authorization: `bearer ${token}`,
                "Content-Type": "application/json; charset=UTF-8",
            }
        });
        const responseData = await response.json()
        setBand(responseData)
        setYoutube(responseData.youtube)
        setFavorites(responseData.favorites)
        setFbData(responseData.fbData)
        setGoogleData(responseData.googleData);
        let newPosts = [];
        if(!responseData.fbData){
            newPosts = responseData.posts;
        }

        //Get New Youtube Posts if the user connects Youtube.
        if(responseData.googleData){
            let apiKey = process.env.REACT_APP_GOOGLE_API

            //Get Youtube Uploads Playlist Id
            let response = await fetch(`https://www.googleapis.com/youtube/v3/channels?part=contentDetails&id=${responseData.googleData.channelId}&key=${apiKey}`)
            let playlistIdResponse = await response.json()
            let uploadsPlayListId = playlistIdResponse.items[0].contentDetails.relatedPlaylists.uploads

            //Get Videos from Uploads Playlist
            response = await fetch(`https://www.googleapis.com/youtube/v3/playlistItems?playlistId=${uploadsPlayListId}&key=${apiKey}&part=snippet&maxResults=50`)
            let videosResponse = await response.json()

            //Create Youtube Posts
            let youtubeFormattedPosts = []
            videosResponse.items.forEach(video => {
                let youtubeVideoObject = {
                    type: "video", 
                    data: video.snippet.resourceId.videoId, 
                    date: video.snippet.publishedAt, 
                    postId: video.id, 
                    rockOn: []
                }
                youtubeFormattedPosts.push(youtubeVideoObject)
            })

            //Set All Posts - This works, if no other apis get called.
            newPosts = [ 
                ...responseData.posts, 
                ...youtubeFormattedPosts
                    .filter(({postId}) => 
                    !responseData.posts
                        .find(post => post.postId == postId)),
            ];
        }

        let fbDataTemp = responseData.fbData
        if(responseData.fbData && !responseData.fbData.instaId){
            //Get Only FB and ODB Posts
            //Get Fb Posts
            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.slice(0, -2) + ':' + post.created_time.slice(-2),
                        postId: post.id,
                        rockOn: []
                    }
                    fbFormattedPosts.push(fbPostObject)
                }
            })

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

        }else if(responseData.fbData && responseData.fbData.instaId){
            //First Get Fb Posts
            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.slice(0, -2) + ':' + post.created_time.slice(-2),
                        postId: post.id,
                        rockOn: []
                    }
                    fbFormattedPosts.push(fbPostObject)
                }
            })

            //Get IG Media Ids 
            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 
            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)
            }

            //Set All Posts 
            newPosts = [ 
                ...newPosts, 
                ...instaFormattedPosts
                    .filter(({postId}) => 
                            !newPosts
                                .find(post => post.postId == postId))
            ];

        }

        setPosts(newPosts);
    } catch (error) {
        console.log(error)
    }
}