VueJS2调用异步方法返回API数据时报Cannot read property 'P_shortName' of undefined如何解决

• registerName方法的async修饰属于冗余配置：当前逻辑仅在本地已加载的registers数组中做匹配查找，无异步执行逻辑，加async会让方法默认返回Promise对象，模板无法正常解析异步返回值。
• 首次渲染时数据未加载完成：registers为API异步返回的数据，组件首次渲染阶段接口请求尚未完成，registers是空数组，find方法匹配不到对应值会返回undefined，直接读取undefined的P_shortName属性就会抛出报错。等接口返回数据后触发组件响应式更新，此时find可以匹配到有效对象，因此UI可以正常渲染，但首次渲染的报错已经被控制台记录。

• 移除不必要的async修饰
  直接删除方法前的async关键字即可，修改后代码示例：

methods: {
  registerName(id) {
    const register = this.registers.find(
      register => id === register.registerIdentifier_PK
    )
    return register?.P_shortName || ''
  },
}

• 增加属性读取兜底判断
  如果项目支持ES2020+语法，可以直接用可选链?.做安全访问；如果不支持可选链，改为先判断对象存在再返回属性：

// 无可选链支持的兼容写法
return register ? register.P_shortName : ''

• 渲染节点加数据有效性判断
  在模板调用方法的节点上增加判断，保证registers有数据时才执行查找逻辑，避免首次空匹配：

<td v-if="registers.length">
  {{ registerName(country.registerIdentifier_FK) }}
</td>

• （推荐）提前预计算映射数据
  模板内调用方法做数组查找会在每次组件重渲染时重复执行遍历逻辑，性能较差。建议在拿到registers和country列表的接口回调中，提前把每个country对应的注册名称计算好挂载到country对象上，模板直接读取预计算的属性即可：

// 示例：获取country列表时预计算关联字段
async getCountryList() {
  const res = await api.fetchCountryList()
  this.countryList = res.data.map(country => {
    const matchRegister = this.registers.find(
      r => r.registerIdentifier_PK === country.registerIdentifier_FK
    )
    return {
      ...country,
      registerName: matchRegister ? matchRegister.P_shortName : ''
    }
  })
}

模板直接使用预计算字段：

<td>
  {{ country.registerName }}
</td>

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