React中判断数组元素存在性及获取差集时else语句异常问题

问题根源 #

你的代码存在两个核心问题：

1. 嵌套循环逻辑错误
   当前代码会在每一次firstArray元素与secondArray元素不匹配时触发else分支输出，导致大量重复内容。比如：

   • 遍历firstArray[0]（Blog1）时，secondArray里的Blog2、3、4都会触发else输出
   • 遍历firstArray[1]（Blog2）时，secondArray里的Blog1、3、4又会触发else输出
     最终Blog3、Blog4会被重复输出2次，还会额外输出Blog1、Blog2各1次，这就是你看到的非预期重复。

2. React类组件语法错误
   类组件的类体中不能直接声明const变量或执行for循环，这些逻辑必须放到生命周期方法（如componentDidMount）或副作用钩子中。

解决方法 #

正确逻辑思路 #

先把firstArray中的name提取为一个集合（查找效率更高），再遍历secondArray筛选出不在该集合中的元素，避免嵌套循环的重复判断。

修正后的类组件代码 #

class App extends React.Component {
  componentDidMount() {
    const firstArray = [
      { name: "Blog 1" },
      { name: "Blog 2" },
    ];   

    const secondArray = [
      { name: "Blog 1" },
      { name: "Blog 2" },
      { name: "Blog 3" },
      { name: "Blog 4" },
    ];

    // 提取firstArray的name到Set，实现O(1)时间复杂度查找
    const firstNames = new Set(firstArray.map(item => item.name));

    // 筛选secondArray中独有的元素
    const uniqueItems = secondArray.filter(item => !firstNames.has(item.name));

    console.log("匹配的元素：", firstArray);
    console.log("仅在secondArray中的元素：", uniqueItems);
  }

  render() {
    return <div>Check below</div>;
  }
}

推荐的函数组件写法（React 16.8+） #

function App() {
  React.useEffect(() => {
    const firstArray = [
      { name: "Blog 1" },
      { name: "Blog 2" },
    ];   

    const secondArray = [
      { name: "Blog 1" },
      { name: "Blog 2" },
      { name: "Blog 3" },
      { name: "Blog 4" },
    ];

    const firstNames = new Set(firstArray.map(item => item.name));
    const uniqueItems = secondArray.filter(item => !firstNames.has(item.name));

    console.log("匹配的元素：", firstArray);
    console.log("仅在secondArray中的元素：", uniqueItems);
  }, []);

  return <div>Check below</div>;
}

效果说明 #

运行修正后的代码，控制台会输出：

匹配的元素： [{name: 'Blog 1'}, {name: 'Blog 2'}]
仅在secondArray中的元素： [{name: 'Blog 3'}, {name: 'Blog 4'}]

完全符合预期，没有重复内容。

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