Angular使用Observable的map、filter处理服务端数据时vpainfo未定义报错如何解决

1. BehaviourStore对应的BehaviourSubject初始化时默认值结构不完整，比如初始值未设置todos字段，或是todos数组中存在undefined元素，遍历过滤时拿到的遍历项为undefined，访问undefined.vpainfo就会抛出该错误。
2. 接口返回的todos数组中可能存在部分缺失vpainfo字段的记录，或是vpainfo不是数组类型，也会触发该类属性访问错误。
3. 现有代码没有做边界校验就直接访问嵌套属性，判断逻辑存在疏漏。

首先需要保证BehaviourSubject初始化时传入结构完整的默认值，避免初始发射值缺失字段：

// BehaviourSubject初始化示例，必须设置完整的初始结构
private behaviourStore = new BehaviorSubject({
  todos: []
})

再修改数据处理逻辑，通过可选链运算符做全链路的属性访问校验，避免访问未定义属性：

this.virtualAddressListObj = this.behaviourStore.state$.pipe(
  map(state => {
    // 先校验todos是否为有效数组，避免调用filter报错
    if (!Array.isArray(state?.todos)) return []
    return state.todos.filter(v => {
      // 依次校验层级属性存在性，!= null 可同时匹配null和undefined两种情况
      return !!v?.vpainfo?.length && v.vpainfo[0]?.vpa != null
    })
  })
)

// 订阅逻辑无需修改
this.virtualAddressListObj.subscribe(
  val => { console.log(JSON.stringify(val))},
  error => { console.log(error) },
  () => { console.log("Completed") }
)

改动说明：

• 可选链运算符?.会在上一级属性为undefined/null时直接返回undefined，不会抛出属性访问错误
• 新增数组类型校验，避免非数组类型调用数组方法报错
• 简化判断逻辑，!= null同时覆盖null和undefined的判断场景，无需写两次判断条件

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