为什么Angular中ngrx获取的已定义对象属性会被判定为undefined？

问题原因 #

1. 控制台对象日志的懒求值特性：这是最高概率的诱因。浏览器执行console.log(对象)时不会保存该对象当前时刻的完整快照，仅会存储对象的内存引用，等你手动在控制台点击展开对象时，才会读取该引用指向的最新值。
   实际你的subscribe回调大概率被触发了两次：第一次触发时homeState是空对象，此时直接取值homeState.banner自然是undefined；后续状态更新后第二次触发回调，homeState才带上了完整的banner属性。你第一次打印的对象引用在你点开查看时已经指向了更新后的值，才会出现「看起来有banner但直接取值是undefined」的矛盾现象。
2. 状态分片注册错误：如果用Ngrx feature reducer，检查StoreModule.forFeature/provideState注册的分片key是否和你store.select时的取值路径一致，是否存在分片注册错误导致初始状态未正确挂载。
3. 不可变数据结构访问错误：如果你项目中用了Immutable.js等不可变数据类库封装状态，不能用.直接访问属性，需要用类库提供的get('banner')之类的API取值，也会导致直接取属性为undefined。

解决方案 #

第一步：先确认真实的状态取值 #

用JSON序列化打印状态快照，排除控制台懒求值的干扰，确认状态的真实值：

homeState$.subscribe((homeState) => {
  // 输出打印时刻的状态快照，不存在懒加载问题
  console.log('当前状态快照', JSON.stringify(homeState, null, 2))
  console.log('banner取值', homeState?.banner)
  this.homeState = homeState;
})

第二步：对应处理 #

• 如果确认是多次触发、第一次状态无banner的情况：
  用rxjs操作符过滤无效值，或者增加空值保护即可：

  import { filter } from 'rxjs'
  
  const homeState$ = this.store.select(state => state.homeState).pipe(
    // 过滤掉没有banner的无效状态，只保留有效值
    filter(state => !!state?.banner)
  )
  

  取值时统一用可选链homeState?.banner?.images避免空值报错。
• 如果是状态分片注册错误：核对feature key和取值路径，确保注册的reducer初始值正确包含banner属性。
• 如果是不可变数据类库的问题：替换为对应类库的属性访问API即可。

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