删除重复的 JSX 元素 |反应 Strapi graphql

Question

长话短说，我有 JSX 元素数组，看起来像这样：

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

我从 Strapi/Graphql API 中的两个不同表格中获得了这些“卡片”的道具，所以我这样做了：

[].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 和 Proposals 包含相同的字段，它们只是在站点的其他地方有不同的用途
users_permissions_user和owner也是同一个关系

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);
});

删除重复的 JSX 元素 |反应 Strapi graphql

Remove duplicate JSX elements | React Strapi graphql

mapping

filtering

reactjs

graphql

strapi