添加对象前检查是否已存在于目标数组的实现问题

问题原因 #

你当前的判断逻辑错误：visibles.includes(next)是比较对象引用，但next是传入的当前对象，而visibles中存储的是opciones数组里的对象——即使二者id相同，也是不同的对象实例，所以includes永远返回false，导致重复添加。

修正后的代码 #

function next(ev, currentItem) {
  ev.preventDefault();
  setToggle(currentItem.siguiente);
  
  // 精准查找目标对象，替代遍历整个数组的map
  const targetOpcion = opciones.find(opcion => opcion.id === currentItem.siguiente);
  if (!targetOpcion) return; // 找不到对应对象时直接终止，避免无效操作

  // 通过id判断visibles中是否已存在该对象
  const isDuplicate = visibles.some(item => item.id === currentItem.siguiente);
  if (isDuplicate) {
    console.log("already exists");
    return;
  }

  // 注意：如果visibles是React状态，不能直接push，需用不可变方式更新
  // setVisibles(prevVisibles => [...prevVisibles, targetOpcion]);
  // 若为普通数组，直接push即可
  visibles.push(targetOpcion);
}

优化要点 #

• 替换map为find：map会遍历全数组，find找到匹配项就停止，性能更优。
• 避免直接修改状态（React场景）：React状态是不可变的，直接push不会触发组件重渲染，必须通过展开运算符创建新数组更新状态。
• 参数命名优化：原参数next与函数名重名，改为currentItem避免歧义。
• 增加边界判断：找不到目标对象时直接返回，减少无效执行流程。

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