Ember Component赋值Map后调用this.get返回undefined问题求助

• 核心原因是你没有在init方法开头调用父类的this._super(...arguments)，Ember.Component的初始化流程依赖父类init的执行，未调用的情况下实例属性的状态没有完成初始化，此时执行set操作不会正常挂载属性到实例上，后续get就会返回undefined。
• 次要排查点：如果你的console.log执行时机早于init内的set操作，也会拿到undefined。
• 低版本Ember兼容性问题：Ember 2.x及更早版本对原生JS Map的set/get追踪支持不完善，也可能出现取值异常。

1. 优先修复init方法，首行必须调用父类初始化逻辑：

const SubscriptionForm = Ember.Component.extend({
  messagesFilter: Ember.Map.create(),
  
  init() {
    // 必须放在init第一行
    this._super(...arguments);
    this.set('messagesFilter', this.getMessagesFilter());
    // 此时打印即可拿到正确值
    console.log(this.get('messagesFilter'));
  },
  // 其余代码保持不变
})

2. 如果使用Ember 2.x及更低版本，建议统一使用Ember内置的Ember.Map避免兼容性问题，修改getMessagesFilter的实现：

getMessagesFilter() {
  let map = Ember.Map.create();
  const availableMessages = this.get('availableMessages');
  for (var i = 0; i < availableMessages.length; i++){
    let array = [];
    map.set(availableMessages.objectAt(i), array);
  }
  return map;
}

3. 确认所有读取messagesFilter的操作都在组件init执行完成后触发，不要在早于init的生命周期阶段读取该属性。

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