Ember中unshiftObject方法失效问题排查求助

你的问题出在combinedList这个getter的行为上：

• 当objArr.length > 1时，每次访问this.combinedList都会创建一个全新的数组，把所有item的list元素合并后返回。你调用unshiftObject修改的只是这个临时数组，修改完成后这个数组就被销毁了，完全没影响到原objArr里的任何数据，所以模板里看不到新增的元素。
• 当objArr.length <= 1时，getter直接返回objArr[0].list的引用，你修改这个引用指向的数组，会直接改变原对象里的list，所以能正常显示新增内容。

你需要修改addComment的逻辑，让新元素真正被添加到原objArr的list中，这样combinedList getter下次计算时才能包含新元素。以下是两种常见的修复方式：

方式1：把新元素添加到已有对象的list中 #

export default class YourComponent extends Component {
  objArr = [ {id:1, list:[1,2,3]}, {id:2, list:[3,4]} ];

  get combinedList() {
    if (this.objArr.length > 1) {
      let list = [];
      this.objArr.forEach((item) => {
        list.push(...item.list);
      });
      return list;
    }
    return this.objArr[0].list;
  }

  addComment(newItem) {
    // 把新元素插入到第一个对象的list开头
    this.objArr[0].list.unshiftObject(newItem);
    
    // 如果你用的是React这类响应式框架，需要通过更新state触发视图刷新：
    // this.setState(prev => ({
    //   objArr: prev.objArr.map((item, idx) => 
    //     idx === 0 ? {...item, list: [newItem, ...item.list]} : item
    //   )
    // }))
  }
}

方式2：新增一个包含新元素的对象到objArr #

export default class YourComponent extends Component {
  objArr = [ {id:1, list:[1,2,3]}, {id:2, list:[3,4]} ];

  get combinedList() {
    if (this.objArr.length > 1) {
      let list = [];
      this.objArr.forEach((item) => {
        list.push(...item.list);
      });
      return list;
    }
    return this.objArr[0].list;
  }

  addComment(newItem) {
    // 新增一个独立对象到objArr头部
    this.objArr.unshift({ id: Date.now(), list: [newItem] });
    
    // React环境下的响应式更新写法：
    // this.setState(prev => ({
    //   objArr: [{ id: Date.now(), list: [newItem] }, ...prev.objArr]
    // }))
  }
}

如果使用的是React、Vue这类响应式框架，必须遵循框架的状态更新规则——不能直接修改原数组/对象的属性，要通过创建新的数组/对象来触发视图更新，否则修改后模板不会同步刷新。

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