Angular中调用selectCustomer时字符串重复推入selectedList问题

问题场景 #

• 有两组列表结构：每组包含可搜索过滤的列表（如selectedList、deselectedList）和原始全量列表（originalSelect、originalDeselect）
• 字符串通过deselectedListToBeMoved在两组间转移，预期同一时间两组不会出现重复字符串
• 调用selectCustomer()方法时，selectedList偶尔会出现重复字符串，移除this.originalSelect.push(deselect);语句后，重复问题消失

原问题代码 #

selectCustomer() {
  for (let deselect of this.deselectedListToBeMoved) {
    this.deselectedList = this.deselectedList.filter(
      (customer) => customer !== deselect
    );
    this.originalDeselect = this.originalDeselect.filter(
      (customer) => customer !== deselect
    );
    this.selectedList.push(deselect);
    this.originalSelect.push(deselect);
  }
  this.selectedList.sort((a, b) => a.localeCompare(b));
  this.deselectedListToBeMoved = [];
}

<div id="customer_{{cus}}" class="individual-customers" *ngFor="let cus of selectedList">{{cus}}</div>

问题根源 #

核心是originalSelect的状态没有和selectedList严格同步，且添加操作未做存在性校验：

1. 当deselectedListToBeMoved被意外重复赋值相同字符串时，originalDeselect能通过filter移除目标字符串，但originalSelect会直接重复push该字符串
2. 如果后续有基于originalSelect更新selectedList的逻辑（比如搜索过滤后重置列表），就会把重复值带入selectedList，导致前端重复渲染
3. 移除originalSelect.push后，originalSelect不会出现重复，后续同步逻辑自然不会引入重复，但这只是临时规避，没解决根本问题

修复方案 #

在添加到selectedList和originalSelect前，先检查目标字符串是否已存在，避免重复添加：

selectCustomer() {
  for (let deselect of this.deselectedListToBeMoved) {
    // 从 deselected 侧列表移除目标字符串
    this.deselectedList = this.deselectedList.filter(customer => customer !== deselect);
    this.originalDeselect = this.originalDeselect.filter(customer => customer !== deselect);
    
    // 添加前做存在性检查，防止重复
    if (!this.selectedList.includes(deselect)) {
      this.selectedList.push(deselect);
    }
    if (!this.originalSelect.includes(deselect)) {
      this.originalSelect.push(deselect);
    }
  }
  this.selectedList.sort((a, b) => a.localeCompare(b));
  this.deselectedListToBeMoved = [];
}

额外优化点 #

• 封装通用的列表转移函数，统一处理移除、添加、去重逻辑，减少重复代码
• 检查deselectedListToBeMoved的赋值逻辑，确保不会重复添加相同字符串（比如用户选择时做即时去重）

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