React：对比嵌套对象数组中的值并仅展示差异

现有代码的问题 #

你当前的代码中，用data1 === data2判断数组是否相等是错误的——数组是引用类型，===比较的是内存地址而非数组内容。哪怕两个数组元素完全一致，只要是不同的数组对象，这个判断都会返回false，导致filter逻辑无法正确筛选出差异项。同时渲染部分直接输出{data}会显示[object Object]，无法正确展示数组内容。

修正方案 #

我们需要先提取所有嵌套数组的元素，统计每个元素的出现次数，筛选出仅在单个数组中出现的元素（即差异元素），再将其渲染为列表。

完整代码 #

const arrayObjOne = [
  { display: ["Stockholm", "Copenhagen", "Berlin"] },
  { display: ["Stockholm", "Copenhagen", "Berlin", "Oslo"] },
];

// 统计元素出现次数，筛选差异元素的工具函数
function getUniqueElements(arrays) {
  const countMap = {};
  arrays.forEach(arr => {
    arr.forEach(item => {
      countMap[item] = (countMap[item] || 0) + 1;
    });
  });
  return Object.keys(countMap).filter(item => countMap[item] === 1);
}

function Testpage() {
  // 提取所有display数组并获取差异元素
  const uniqueElements = getUniqueElements(arrayObjOne.map(item => item.display));
  
  return (
    <div>
      <h3>差异元素：</h3>
      <ul>
        {uniqueElements.map((item, i) => (
          <li key={i}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default Testpage;

代码说明 #

1. 工具函数getUniqueElements：遍历所有嵌套数组，用对象统计每个元素的出现次数，最后筛选出仅出现一次的元素（即只在某一个数组中存在的差异项）。
2. 组件逻辑：通过arrayObjOne.map(item => item.display)提取所有嵌套的display数组，传入工具函数得到差异元素，最后渲染为列表。
3. 渲染优化：添加key属性（React要求列表项必须有唯一key），直接渲染差异元素，避免显示对象的默认字符串形式。

如果你的数组对象数量超过2个，这个方案依然有效——它会找出所有仅在单个数组中出现的元素。

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