Vue.js代码通过idRecord对比获取adm ID时返回null排查求助

问题排查步骤 #

• 先校验两个字段的数据类型是否一致：比如admElement.id是数字类型，businessElement.idRecord是字符串类型的话，用===全等判断肯定匹配失败，你注释里的旧for循环用的是==宽松相等，新的forEach用的是===全等，先把两个字段的值和类型打印出来验证：

// 加在判断前查看实际值和类型
this.optionIdRecord.forEach(admElement => {
  console.log('adm的id值：', admElement.id, '类型：', typeof admElement.id)
})
this.Business.forEach(businessElement => {
  console.log('业务的idRecord值：', businessElement.idRecord, '类型：', typeof businessElement.idRecord)
})

• 确认两个数组在代码执行时机已经完成赋值：Vue异步更新的场景下，如果你是在接口请求后立刻执行对比逻辑，可能数组还没被赋值成功，要把对比逻辑放在接口请求的then/await回调里执行，或者用$nextTick包裹确保响应式数据已经更新完成。
• 检查字段名是否拼写错误：注意大小写、拼写是否准确，比如是不是把idRecord写成了idrecord/IdRecord，或者optionIdRecord里的主键是不是叫id而不是别的字段名。

兼容类型差异的优化代码 #

如果确认是类型不一致导致的匹配失败，可以转成同一类型后再判断，比如统一转字符串：

const matchedList = []
this.optionIdRecord.forEach(admElement => {
  const target = this.Business.find(item => String(item.idRecord) === String(admElement.id))
  if (target) {
    matchedList.push({
      admId: admElement.id,
      businessInfo: target
    })
  }
})
console.log('匹配到的结果', matchedList)

如果还是匹配不到就先看第一步打印的两个数组的实际值，确认是否存在id相等的记录，排除两个数组本身没有匹配项的情况。

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