如何对比数组最后两个选中元素的name和type实现复选框选中校验

核心校验规则 #

仅对选中数组的最后两个元素做校验，规则如下：

• 首次选中时数组仅1个元素，直接更新选中状态，无需校验
• 第二次及后续选中操作，仅比对最新选中项和它前一个选中项的type、name属性
• 两个属性不一致时，不勾选当前项，弹出警告提示

现有实现问题 #

原有代码用双层for循环做全量两两对比，仅选中2项时运行正常，选中第3项及以上时，属性不匹配的行仍会被标记为选中，不符合需求。

相关示例 #

首次选中数组 #

let arr = [{aID:5, name: "trt", address:"tyuy", type:"ttype"}]

第二次选中（合法场景） #

arr = [
  {aID:5, name: "trt", address:"tyuy", type:"ttype"},
  {aID:6, name: "trt", address:"thyr", type:"ttype"}
]

第三次选中（异常场景） #

let arr = [
  {aID:5, name: "trt", address:"tyuy", type:"ttype"},
  {aID:6, name: "trt", address:"thyr", type:"ttype"},
  {aID:6, name: "gdg", address:"thyr", type:"ptype"}
]

该场景下第三个元素的type、name和上一项不一致，预期要拦截选中。

原有错误代码 #

for (let i = 0; i < selected.length; i++) {
  for (let k = i + 1; k < selected.length; k++) {
      if ((selected[i].type === selected[k].type) &&(selected[i].name === selected[k].name)) {
        this.setState({ selectedRowKeys: e, selectedRecords: selected })
      }
      else{
        return message.warning("Select lien with same type and Name.")
      }
  }
  if(selected.length === 1){
  this.setState({ selectedRowKeys: e, selectedRecords: selected })
  }
}

问题点：双层循环会遍历所有两两元素组合，且在循环内重复触发状态更新，逻辑顺序混乱，完全不符合「仅校验最后两个选中项」的需求。

修复方案 #

不需要双层循环，直接根据数组长度判断，长度≥2时取末尾两个元素比对即可：

// 复选框选中回调，入参e为选中行key数组，selected为选中行完整数据数组
onSelectChange = (e, selected) => {
  // 仅1个选中项直接更新
  if (selected.length <= 1) {
    this.setState({ selectedRowKeys: e, selectedRecords: selected })
    return
  }
  // 取最后两个元素比对属性
  const latest = selected.at(-1)
  const prev = selected.at(-2)
  if (latest.type === prev.type && latest.name === prev.name) {
    this.setState({ selectedRowKeys: e, selectedRecords: selected })
  } else {
    message.warning("请选择相同type和name的行")
    // 若组件默认已将非法项加入选中数组，此处需要回退状态：移除最后一个非法项后再更新
    // 例：const validSelected = selected.slice(0, -1) 再用validSelected对应的key更新即可
  }
}

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