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

Posted 2023-03-08

【中文标题】删除重复的 JSX 元素 |反应 Strapi graphql

【英文标题】：Remove duplicate JSX elements | React 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

查看我更新后的答案，以获得可能更简单易懂且不需要减速器的解决方案。

【参考方案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);
);