Reactjs 使用if语句获取-条件获取问题
我正在开发的应用程序允许用户将社交媒体集成facebook、instagram和youtube连接到我的应用程序中。一旦连接,它会从这些服务中提取他们的所有帖子,并将其放在一个地方——我的应用程序 例如。。。用户可以单独连接facebook。或者用户可以连接所有三个 问题是,如果它们连接了这三个站点,我的最新集成(youtube)就不会将帖子添加到页面中。我之所以相信它,是因为我是如何将帖子存储在React状态的 我下面的代码执行以下操作。。它将本机帖子获取到我的平台。然后,如果用户已连接youtube,它将获取youtube帖子并将其添加到本机帖子中。在此之后,我有另一个if/else语句,它说如果用户连接了facebook或instagram,它就会获取这些帖子,并将它们添加到所有帖子中 发生的情况是,如果用户连接了这三个站点,那么已添加的获取的youtube帖子将被新的fb或instagram帖子覆盖。-我正在寻找关于如何编写此代码的建议,以便它仍然有条件地获取youtube帖子,但在一切结束时不会覆盖它们。我还将在代码中的注释中解释它是如何工作的 我想我需要弄清楚如何在更高的范围内获取我在youtube上的帖子,这样它们就不会被覆盖 谢谢Reactjs 使用if语句获取-条件获取问题,reactjs,if-statement,use-state,fetching-strategy,Reactjs,If Statement,Use State,Fetching Strategy,我正在开发的应用程序允许用户将社交媒体集成facebook、instagram和youtube连接到我的应用程序中。一旦连接,它会从这些服务中提取他们的所有帖子,并将其放在一个地方——我的应用程序 例如。。。用户可以单独连接facebook。或者用户可以连接所有三个 问题是,如果它们连接了这三个站点,我的最新集成(youtube)就不会将帖子添加到页面中。我之所以相信它,是因为我是如何将帖子存储在React状态的 我下面的代码执行以下操作。。它将本机帖子获取到我的平台。然后,如果用户已连接you
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)
}
}
const getPosts=async()=>{
const token=wait getTokensilly();
试一试{
//获取ODB/本地帖子
let response=wait fetch(`/api/autoquotegenerators/${u id}`{
标题:{
授权:`bearer${token}`,
“内容类型”:“应用程序/json;字符集=UTF-8”,
}
});
const responseData=await response.json()
受挫(回应数据)
setYoutube(responseData.youtube)
设置收藏夹(responseData.favorites)
setFbData(responseData.fbData)
setGoogleData(responseData.googleData)
如果(!responseData.fbData){
设置柱(响应数据柱)
}
//如果用户连接Youtube,则获取新的Youtube帖子。
if(responseData.googleData){
让apiKey=process.env.REACT\u APP\u GOOGLE\u API
//获取Youtube上载播放列表Id
let response=等待获取(`https://www.googleapis.com/youtube/v3/channels?part=contentDetails&id=${responseData.googleData.channelId}&key=${apiKey}`)
让playlidResponse=wait response.json()
让uploadsPlayListId=PlayIDResponse.items[0]。contentDetails.RelatedPlayList.uploads
//从上传播放列表中获取视频
响应=等待获取(`https://www.googleapis.com/youtube/v3/playlistItems?playlistId=${uploadsPlayListId}&key=${apiKey}&part=snippet&maxResults=50`)
让videosResponse=wait response.json()
//创建Youtube帖子
让youtubeFormattedPosts=[]
videosResponse.items.forEach(视频=>{
让youtubeVideoObject={
键入:“视频”,
数据:video.snippet.resourceId.videoId,
日期:video.snippet.publishedAt,
posted:video.id,
罗肯:[]
}
youtubeFormattedPosts.push(youtubeVideoObject)
})
//设置所有POST-如果没有调用其他API,则此操作有效。
设置柱([
…回复数据,
…YouTubeformatedPosts
.filter({postId})=>
!responseData.posts
.find(post=>post.postId==postId)),
])
}
设fbDataTemp=responseData.fbData
if(responseData.fbData&&!responseData.fbData.instaId){
//仅获取FB和ODB帖子
//获取Fb帖子
让fbFormattedPosts=[]
响应=等待获取(`https://graph.facebook.com/${fbDataTemp.pageId}/feed?访问令牌=${fbDataTemp.pageAccessTokenLong}`)
让fbPosts=wait response.json()
fbPosts.data.forEach(post=>{
如果(发布消息){
设fbPostObject={
键入:“文本”,
数据:post.message,
链接:`http://www.facebook.com/${post.id}`,
日期:post.created_-time.slice(0,-2)+':'+post.created_-time.slice(-2),
posted:post.id,
罗肯:[]
}
fbFormattedPosts.push(fbPostObject)
}
})
//设岗
设置柱([
…回复数据,
…格式化的帖子
.filter({postId})=>
!responseData.posts
.find(post=>post.postId==postId)),
])
}else if(responseData.fbData&&responseData.fbData.instaId){
//首先获得Fb帖子
让fbFormattedPosts=[]
响应=等待获取(`https://graph.facebook.com/${fbDataTemp.pageId}/feed?访问令牌=${fbDataTemp.pageAccessTokenLong}`)
让fbPosts=wait response.json()
fbPosts.data.forEach(post=>{
如果(发布消息){
设fbPostObject={
键入:“文本”,
数据:post.message,
链接:`http://www.facebook.com/${post.id}`,
日期:post.created_-time.slice(0,-2)+':'+post.created_-time.slice(-2),
posted:post.id,
罗肯:[]
}
fbFormattedPosts.push(fbPostObject)
}
})
//获取IG媒体ID
让InstaformatedPosts=[]
响应=a