从两个数组中过滤重复项

Question

我正在尝试从两个数组中过滤重复项...

responseData.posts 和 fbFormattedPosts 都是 post 对象的数组。一些 post 出现在两个数组中具有相同的 'postId'。我想将我的状态设置为包含 responseData.posts 的所有 post 的数组...然后我想将 fbFormattedPosts 添加到该数组 - 但我不想包含 fbFormattedPosts有相同的'postId'。

我使用 useState 函数 setPosts 设置 'posts' useState 数组。如果我为它们使用扩展运算符，它们都会从每个数组中添加所有 post。这行得通，但我最终得到了重复的 posts。

//set All Posts
        setPosts([ ...responseData.posts, ...fbFormattedPosts])

因此，我正在尝试比较 ID 以将其过滤掉。

setPosts([ ...responseData.posts, fbFormattedPosts.forEach(fbPost => {
            responseData.posts.filter(resPost => {
                if(fbPost.postId !== resPost.postId ){
                    return fbPost
                }
            })
        })])

显然这不起作用...现在我根本没有 posts。甚至 responseData.posts。

Answer 1

你的主旨是对的，但是你没有做对。您需要在添加之前过滤 fbFormattedPosts。 Array.every 测试数组中的所有元素是否都通过提供的函数实现的测试。 Array.filter 剪切所有 every return false

的元素

setPosts([ ...responseData.posts, fbFormattedPosts.filter(fbPost => {
        return responseData.posts.every(resPost => {
            return fbPost.postId !== resPost.postId
        })
    })])

Answer 2

按照您的逻辑，fbFormattedPosts 应根据 responseData.posts 中缺失的 postId 进行过滤，因此您需要的只是查找匹配项（例如使用某些方法，例如 Array.prototype.find() 或 Array.prototype.some()，将在 Array.prototype.filter() 内评估为真值并在匹配后立即退出）并且不要忘记传播过滤器的结果（使用 ...）：

setPosts([ 
   ...responseData.posts, 
   ...fbFormattedPosts
      .filter(fbPost => 
         !responseData.posts
            .find(post => 
               post.postId == fbPost.postId
            )
      )
])

Answer 3

如果您想以函数式方式展开数组，您应该使用数组 filter and some:

setPosts([ ...responseData.posts, ...fbFormattedPosts.filter(fbPost => (
            !responseData.posts.some(resPost =>
                fbPost.postId === resPost.postId 
            )
        ))])

从两个数组中过滤重复项

Filtering duplicates from two arrays

javascript

arrays

filter

reactjs

use-state