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

【问题标题】：Remove duplicate JSX elements | React Strapi graphql删除重复的 JSX 元素 |反应 Strapi graphql
【发布时间】：2021-09-29 17:13:58
【问题描述】：

长话短说，我有一个 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 也是同一个关系

【问题讨论】：

您的问题解决了吗？ :-)
嘿！仍在尝试这样做.. set 方法似乎在某种程度上有效，但没有完成这项工作，但我想如果我弄清楚我是如何工作的，我会尝试使用 reduce 的复杂过滤器：D
查看我更新后的答案，以获得可能更简单易懂且不需要减速器的解决方案。

标签： reactjs graphql mapping filtering strapi

【解决方案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);
});

【讨论】：