删除重复的JSX元素\图形JSX

Question

长话短说，我有很多JSX元素，它们如下所示：

              <ChatListCard
                key={index}
                prop1={prop1}
                prop2={prop2}
                prop3={prop3}
              />

我从Strapi/Graphql中的两个不同表中获得这些“卡”的道具，因此我执行如下操作：

[].concat(
  array1.map((item,index)=> <Card key={index} prop1={item.prop1} ... />),
  array2.map((item,index)=> <Card key={index} prop1={item.prop1} ... />)
)

问题是，array1和array2包含一些相同的“项”，需要过滤掉。是否有一种方法，使用JS：

[].concat(...).filter((magic)=> magic but filtered) //use the filter here

或者我应该用GraphQL来做。(我已经在其中使用where子句来过滤掉我不需要的项目)

query ProposalsAndRequests($input:String!){
  proposals(where: {_or:[
    {owner:{email:$input}}
    {task:{owner:{email:$input}}}
  ]},sort:"created_at:desc"){
    id
    ...
    }
  }
  chatRequests(where:{_or:[
    {users_permissions_user:{email:$input}}
    {task:{owner:{email:$input}}}
  ]},sort:"created_at:desc"){
    id
    ...
  }
}

• 备注: chatRequests和建议书包含相同的字段，它们只是在站点的其他地方服务不同的目的--
• users_permissions_user和所有者也是相同的关系

。

Answer 1

您可以使用js中的"Set“数据结构来完成。const set = new Set(arr);。集合不能有重复的！:-)但是如果引用不一样，它们可以有相同的对象。

对于更复杂的过滤器，使用.reduce函数只累加单变量。

或者，您可以通过暴力删除副本，如下所示：

const noDubs = [];

myArr.foreach(item => {
  if(!noDubs.some(entry = entry.special.property === item.special.property) noDubs.push(item);
});