为什么每次进入路线时组件都会自我复制？

Question

我正在开发我的第一个余烬应用程序，但遇到组件问题。我有一条路线可以加载多个组件。每个都加载以下范例：{{#each someList as |item|}}<MyComponent @item={{item}} />{{/each进入路线时效果很好。但是，每次我离开页面并返回而没有刷新时，其中一个组件将再次呈现。我是Ember的新手。我尝试使用组件生命周期挂钩来强制重新渲染，但没有成功。我也尝试设置一个变量来检查容器是否已经加载，但是在离开页面时会重置。无法运作：{{#each this.weapons as |weapon|}}    <CharacterWeaponDetail @weapon={{weapon}} />{{/each}}在职的：{{#each (this.skills) as |skill| }}    <SkillDetail    @skill={{skill}}     @character={{charactersheet}}     @chrSkills={{chrSkills}}     @charParam={{charactersheet.id}}     @action="filter"    @unUsedSP={{this.unUsedSP}}    @realtimeSkillPoints={{realtimeSkillPoints}}    @filter={{charactersheet.profession.name}}/> {{/each}} 说每个组件加载两次。第一次渲染时，结果如下所示：<CharacterWeaponDetail /><CharacterWeaponDetail /><SkillDetail /><SkillDetail />这是预期的行为。但是，如果我使用{{link-to}}离开路线而没有完全刷新就返回，结果将如下所示：<CharacterWeaponDetail /><CharacterWeaponDetail /><CharacterWeaponDetail /><CharacterWeaponDetail /><SkillDetail /><SkillDetail />每次页面加载<CharacterWeaponDetail />将再次重复。我该如何阻止这种情况的发生。

Answer 1

model()每次输入路线时，都会执行路线的挂钩。您将Weapon在每次执行中创建新的。这些Weapon对象被推到weapons路线的属性。路由是ember.js中的单例。在每次重新进入路由时，都会将更多Weapon对象推送到weapons属性。

您可以通过不将weaponsas存储为route的属性来解决错误，而在每次model()执行挂钩时都初始化一个新数组。您应该在model钩子中替换此代码

for (let i = 0; i < characterWeapons.length; i++) {

  let weapon = Weapon.create();

  let weapons = this.get('weapons');

  // ...

  weapons.push(weapon);

}

和

let weapons = [];

for (let i = 0; i < characterWeapons.length; i++) {

  let weapon = Weapon.create();

  // ...

  weapons.push(weapon);

}

您根本不需要weapons在路线上存储。而且，您不应该确定每次循环for循环时都应替换该属性。