Vue中获取对象数组指定对象的id时出现类型错误如何解决？

当getters.members.find(m => m.accountKey === el.dataKey)找不到匹配的成员对象时，会返回undefined。直接访问undefined.id就会触发TypeError: Cannot read properties of undefined (reading 'id')错误。而之前返回整个对象时，即使是undefined也可以正常赋值，不会报错。

以下几种方式都可以解决这个问题，根据你的需求选择：

1. 使用可选链操作符（推荐） #

通过?.安全访问属性，当find返回undefined时，memberId会被赋值为undefined，不会报错：

const updated = data.map(el => ({
  ...el,
  memberId: getters.members.find(m => m.accountKey === el.dataKey)?.id
}))

2. 先查找再判断，设置默认值 #

如果需要给找不到匹配项的情况设置默认值（比如null或空字符串），可以先把查找结果存起来，再做判断：

const updated = data.map(el => {
  const matchedMember = getters.members.find(m => m.accountKey === el.dataKey);
  return {
    ...el,
    memberId: matchedMember ? matchedMember.id : null // 替换成你需要的默认值
  };
});

3. 逻辑与短路判断 #

利用逻辑与的短路特性，只有当find返回有效对象时才会访问.id：

const updated = data.map(el => ({
  ...el,
  memberId: getters.members.find(m => m.accountKey === el.dataKey) && getters.members.find(m => m.accountKey === el.dataKey).id
}))

注意：这种方式会重复调用find，性能略差，不推荐在数据量大的场景使用。

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