在safari中使用sort [英] using sort in safari
问题描述
我在通过Safari中的日期对帖子进行排序时遇到问题.所有功能均可在Chrome浏览器中正常运行.
I am having an issue sorting through posts by date in safari. All works as expected in Chrome.
首先，我从我的API中获取所有帖子.然后，我从facebook api中获取一些帖子.这些都组合成一个数组.
First I fetch all the posts from my API. I then fetch some posts from the facebook api. These get combined together in an array.
如果我发布新帖子，它将发布到Facebook，然后发回该帖子以显示在我的网站上.在Chrome浏览器中，它会自动按日期对此进行排序，并添加到正确的位置.在野生动物园中，所有新的Facebook帖子都会添加到数组的末尾-未按日期排序.它们显示在列表的末尾.
If I post a new post, it publishes it to facebook and sends back the post to display on my website. In chrome it automatically sorts this by date and is added in the right spot. In safari, all the new facebook posts get added to the end of the array - unsorted by date. They appear at the end of the list.
即使我刷新页面，新"帖子仍保留在列表的末尾.
Even if I refresh the page, the 'new' posts remain at the end of the list.
好的，这是一个更加奇怪的方面.如果我切换回chrome，则可以对它们进行正确排序.当我切换回野生动物园时-它们会正确排序.这几乎就像chrome中发生的一切重置了在Safari中对列表进行排序的能力一样.
OK heres an even weirder aspect. If I switch back to chrome it sorts them correctly. When I switch back to safari - They then get sorted correctly. It is almost like whatever happens in chrome resets the ability to sort the list in safari.
这是我的排序功能
{clicked === 'feed' ? (posts.sort((a, b) =>
new Date(b.date) - new Date(a.date)
).map((post) => {
return <div key={post.postId} >{convertPost(post)}</div>
})) : null }
这是我获取帖子的方式-
Here is how I am fetching the posts -
const getPosts = async () => {
console.log('getting posts on posts')
const token = await getTokenSilently();
try {
//Get ODB 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)
if(!responseData.fbData){
setPosts(responseData.posts)
}
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,
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,
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)
}
}
好的...发现了更多有趣的东西- '.sort'在Safari上不起作用
ok... more interesting things discovered - '.sort' not working on Safari
我在排序函数中添加了1:-1.然后，它首先对safari数组进行正确排序，然后开始一遍又一遍地对其进行反转. Chrome可以正常工作.
I added 1 : -1 to my sort function. It then initially sorts the safari array correctly, then starts reversing it over and over. Chrome works.
{clicked === 'feed' ? (posts.sort((a, b) =>
new Date(b.date) > new Date(a.date) ? 1 : -1
).map((post) => {
return <div key={post.postId} >{convertPost(post)}</div>
})) : null }
推荐答案
基于此答案，Safari浏览器具有(或至少有)日期问题，该日期代表用4位数字表示的时区，没有分号.不幸的是，Facebook返回的日期格式为"2020-02-13T16:14:34 + 0000"，所以这一定是您的问题.
Based on this answer, Safari has (or at least had) problems with dates that represent the time zone with 4 digits, without a semicolon. Unfortunately, Facebook returns date in this format "2020-02-13T16:14:34+0000", so this must be your problem.
要解决此问题，您只需在处理来自Facebook(以及其他使用此格式的服务)的帖子时添加冒号
To fix it, you could just add the colon when processing posts from Facebook (and other services that use this format)
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)
}
})
这篇关于在safari中使用sort的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
