React结合Strapi GraphQL场景下移除重复JSX元素的方案咨询

两种实现方式都可行，可根据你的项目改造成本选择：

优先推荐：GraphQL层面处理 #

因为proposals和chatRequests字段完全一致，仅业务场景有区分，你可以在Strapi后端自定义一个聚合查询，直接将两个表的数据合并后按id去重再返回前端。这种方式可以减少无效数据传输，也降低前端的计算负担，是长期维护成本最低的方案。

次选：前端JS层面处理 #

如果暂时不想调整后端查询逻辑，也可以在前端完成去重，但不要先转成JSX元素再过滤，应该先对原始接口返回的数据去重后再渲染为JSX，实现起来更简单性能也更好：

// 合并接口返回的两个原始数据数组
const mergedRawData = [...proposals, ...chatRequests]
// 基于全局唯一的id字段去重，调整数组顺序可以控制重复时保留哪一侧的条目
const uniqueData = Array.from(new Map(mergedRawData.map(item => [item.id, item])).values())
// 统一渲染为卡片组件，注意key直接用item.id不要用遍历index，避免渲染异常
const cardList = uniqueData.map(item => (
  <ChatListCard
    key={item.id}
    prop1={item.prop1}
    prop2={item.prop2}
    prop3={item.prop3}
  />
))

如果你一定要在拼接后的JSX数组上做过滤也可以实现，但不推荐，性能更差且依赖卡片组件传入id属性，示例代码如下：

const idSet = new Set()
const filteredCards = [].concat(
  array1.map((item,index)=> <Card key={item.id} id={item.id} prop1={item.prop1} ... />),
  array2.map((item,index)=> <Card key={item.id} id={item.id} prop1={item.prop1} ... />)
).filter(card => {
  if (idSet.has(card.props.id)) return false
  idSet.add(card.props.id)
  return true
})

内容的提问来源于stack exchange，提问作者Vasil Kostadinov