在 Safari 中使用排序

Question

我在 Safari 中按日期排序 post 时遇到问题。 Chrome 中的所有工作均按预期进行。

首先，我从 API 中获取所有 post。然后我从 facebook api 中获取了一些 post。这些组合在一个数组中。

如果我 post 一个新的 post，它会将其发布到 facebook 并发回 post 以显示在我的网站上。在 chrome 中，它会自动按日期排序并添加到正确的位置。在 safari 中，所有新的 facebook posts 都被添加到数组的末尾 - 未按日期排序。它们出现在列表的末尾。

即使我刷新页面，'new' post 仍保留在列表末尾。

好的，这是一个更奇怪的方面。如果我切换回 chrome 它会正确排序它们。当我切换回 Safari 浏览器时 - 它们会被正确排序。这几乎就像 chrome 中发生的任何事情都重置了在 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 }

这是我获取 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)
        }
    }

ok...发现了更多有趣的东西- '.sort' not working on Safari

我在排序函数中添加了 1 : -1。然后它最初对 safari 数组进行正确排序，然后开始一遍又一遍地反转它。 Chrome 有效。

{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 }

Answer 1

基于this answer，Safari 在用 4 位数字表示时区且没有分号的日期方面存在（或至少存在）问题。不幸的是，Facebook returns 日期格式为“2020-02-13T16:14:34+0000”，所以这一定是你的问题。

要解决此问题，您可以在处理来自 Facebook（以及使用此格式的其他服务）的帖子时添加冒号

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 中使用排序

using sort in safari

sorting

safari

fetch

reactjs