Vue中methods/computed调用this.array.find返回undefined问题咨询

• 容错处理缺失：Array.find() 没有匹配到对应项时会返回 undefined，此时直接读取 .displayName 属性必然抛出错误。触发该问题的常见场景有两个：
  1. 方法执行时 approvalOptions 还未完成初始化：如果store数据来自异步接口，方法调用的时机可能早于接口返回、store赋值的时机，此时数组为空或者未定义，找不到匹配项
  2. 传入的 value 参数在 approvalOptions 中没有对应的 key 匹配
• 控制台打印的误导性：浏览器控制台打印引用类型（数组、对象）时保存的是内存引用，而非打印时刻的快照。你打印时数组可能还没有值，等你手动点击展开查看时，异步逻辑已经执行完成、数组已经被赋值，所以会误以为执行 find 时数组就有数据。

第一步：补充容错逻辑 #

修改方法代码，增加数组合法性、匹配结果存在性判断，没有匹配时返回兜底值：

// 写在methods中用这个写法
methods: {
  approvalDisplayName(value) {
    // 先校验数组合法性
    if (!Array.isArray(this.approvalOptions)) return value ?? ''
    const matchItem = this.approvalOptions.find(it => it.key === value)
    // 匹配成功才返回displayName，否则返回value本身或者空字符串兜底
    return matchItem ? matchItem.displayName : (value ?? '')
  }
}

如果是写在computed中，注意computed默认不能直接传参，需要返回一个高阶函数接收参数：

computed: {
  ...mapGetters(['approvalOptions']),
  approvalDisplayName() {
    return (value) => {
      if (!Array.isArray(this.approvalOptions)) return value ?? ''
      const matchItem = this.approvalOptions.find(it => it.key === value)
      return matchItem ? matchItem.displayName : (value ?? '')
    }
  }
}

第二步：优化store初始值 #

如果 approvalOptions 来自vuex的getter，确保state中对应属性的初始值设置为空数组 []，不要设置为 null 或者 undefined，避免初始调用时报错。

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