如何在React中过滤重复对象并返回完整的唯一对象

你给出的原始result结构存在语法错误，实际业务中这类列表数据应为数组结构，以下示例默认按result: []格式处理。

去重核心逻辑是通过唯一标识id判断重复，React中实现方式如下：

函数组件实现方案 #

import { useState, useMemo } from 'react';

function UserList() {
  // 存储原始带重复的数据集
  const [originResult, setOriginResult] = useState([
    {id: "6766", name: "Bob", tickets: 95, lastWon: "2019-08-23T00:00:00", departmentId: "28"},
    {id: "3334", name: "Anne", tickets: 177, lastWon: "2019-06-21T00:00:00", departmentId: "28"},
    {id: "3019", name: "Carl", tickets: 221, lastWon: "2019-05-24T00:00:00", departmentId: "28"},
    {id: "6766", name: "Bob", tickets: 95, lastWon: "2019-08-23T00:00:00", departmentId: "28"},
    {id: "3334", name: "Anne", tickets: 177, lastWon: "2019-06-21T00:00:00", departmentId: "28"},
    {id: "3019", name: "Carl", tickets: 221, lastWon: "2019-05-24T00:00:00", departmentId: "28"},
  ]);

  // 缓存去重结果，仅当原始数据变更时才重新计算
  const uniqueResult = useMemo(() => {
    const idMap = new Map();
    originResult.forEach(item => {
      // 以id为唯一key，重复数据直接跳过
      if (!idMap.has(item.id)) {
        idMap.set(item.id, item);
      }
    });
    return Array.from(idMap.values());
  }, [originResult]);

  // 渲染去重后的列表
  return (
    <ul>
      {uniqueResult.map(user => (
        <li key={user.id}>
          姓名：{user.name} | 票数：{user.tickets} | 上次获奖时间：{user.lastWon}
        </li>
      ))}
    </ul>
  );
}

简化版去重逻辑 #

如果不需要Map存储额外信息，也可以用Set+filter实现：

const uniqueResult = useMemo(() => {
  const existedIds = new Set();
  return originResult.filter(item => {
    if (existedIds.has(item.id)) return false;
    existedIds.add(item.id);
    return true;
  });
}, [originResult]);

注意事项 #

• 优先用业务唯一标识id做去重判断，性能远高于全对象序列化比对，也不会出现字段顺序不同导致的判断错误
• 类组件场景可以把去重逻辑放在componentDidMount或者render前的数据预处理阶段，核心去重逻辑和上述一致

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