如何实现仅向数组添加未存在对象 修复多选功能逻辑问题

你当前的实现存在两个核心逻辑错误：

• 遍历判断逻辑错误：在map遍历中只要碰到任意一个id和新值id不一致的元素就执行push，会导致当数组内有多个不匹配元素时，同一个新值被重复添加多次
• 缺少全局存在性判断：没有先校验整个数组是否已经包含目标值，也没有提前终止遍历的逻辑
• 用法不当：map是用来生成新数组的方法，做存在性判断用some/find这类方法更合适

如果以id作为对象唯一性的判断标准（也是多选组件的常规业务逻辑），可以直接用Array.some()做存在性校验，匹配到第一个符合条件的元素就会自动终止遍历：

const multiSelect = value => {
  // 判断数组中是否已存在同id的元素
  const isExisted = selectedPeople.some(item => item.id === value.id);
  // 仅当不存在时才追加新值
  if (!isExisted) {
    setSelectedPeople([...selectedPeople, value]);
  }
};

如果你确实需要判断对象引用完全相等（即你要求的value === item），仅需要修改判断条件即可：

const multiSelect = value => {
  const isExisted = selectedPeople.some(item => item === value);
  if (!isExisted) {
    setSelectedPeople([...selectedPeople, value]);
  }
};

• 性能更优：Array.some()匹配到第一个符合条件的元素就会终止遍历，不需要遍历整个数组
• 逻辑清晰：仅存在性判断为否的时候才执行新增操作，完全避免重复添加的问题
• 符合React状态更新的不可变原则，不需要额外创建临时数组做修改，代码更简洁

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