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

Question

我正在开发我的第一个 ember 应用程序，但我在使用组件时遇到了问题。我有一条加载多个组件的路线。每个加载以下范例:

{{#each someList as |item|}}
<MyComponent @item={{item}} />
{{/each

进入路线时效果很好。但是，每次我离开页面并返回而不刷新时，其中一个组件将再次呈现。

我是 Ember 的新手。我试过使用组件生命周期 Hook 来强制重新渲染但没有成功。我也试过设置一个变量来检查容器是否已经加载，但它会在离开页面时重置。

不工作:

{{#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 />将再次复制。我怎样才能阻止这种情况发生。

编辑

完整路线。

import Route from '@ember/routing/route';
import { hash } from 'rsvp';
import { inject as service } from '@ember/service';
import EmberObject from '@ember/object';

export default Route.extend({
  totalSpSpent: service('total-skill-points-spent'),
  weapons: [],

  async model(params){
    let charactersheet = await this.store.findRecord('charactersheet', params.charactersheet_id );
    let characterWeapons = charactersheet.weaponsets.sets;
    var Weapon = EmberObject.extend({
      fromPlayer: null,
      fromWeapon: null
    });

    for (let i = 0; i < characterWeapons.length; i++) {
      let weapon = Weapon.create();
      let weapons = this.get('weapons');

      let calcWeaponInfo = this.store.findRecord('weapons', characterWeapons[i].weaponID);

      weapon.fromPlayer = characterWeapons[i];
      weapon.fromWeapon = calcWeaponInfo;

      weapons.push(weapon);
      this.set('weapons', weapons);
    }

    return hash({
      charactersheet: charactersheet,
      skills: this.store.findAll('skill'),
      skillcategories: this.store.findAll('skillcategories'),
      skillsubcategories: this.store.findAll('skillsubcategories'),
      chrSkills: [],
      realtimeSkillPoints: null,
      weapons: this.get('weapons')
    })      
  },

  setupController(controller, models){ 
    controller.set('chrSkills', models.chrSkills);
    controller.set('weapons', models.weapons);
    controller.set('realtimeSkillPoints', models.realtimeSkillPoints);
    controller.set('charactersheet', models.charactersheet);
    controller.set('skills', models.skills);
    controller.set('skillcategories', models.skillcategories);
    controller.set('skillsubcategories', models.skillsubcategories);
  },

  afterModel(){
    let totalSpSpent = this.get('totalSpSpent');
    totalSpSpent.clear();
  },
});

根据您的输入，我认为问题在于我将武器返回到一个对象中，然后我将所有对象发送到数组中的组件。凭借这些技能，我正在返回 Ember 的 promise 。我会改变它并报告回来。

Controller 只显示页面上的几个模式。

Answer 1

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

您可以通过不将 weapons 存储为路由的属性来修复该错误，而是在每次执行 model() Hook 时初始化一个新数组。您应该在您的 model Hook 中替换此代码

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);
}

你根本不需要在路线上储存武器。而且您肯定不应该在 for 循环的每次迭代中替换该属性。