我們不能在glimmer組件getter中添加一個ember並發任務，它正在跟蹤組件參數

Question

- 當一個ember並發任務被稱為glimmer組件getter然后它在無限循環中運行。

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { inject as service } from '@ember/service';
import { task } from 'ember-concurrency';

export default class UserTableComponent extends Component {
  @service store;
  @tracked users;

  get taskStatus() {
    let params = {
      'account_id':this.args.account,
      'page':this.args.page
    }
    this.getUsersTask.perform(params);

  }


  @task(function*(params) {
      let recordsWithMeta = yield this.store.query('user', params);
      this.users= recordsWithMeta.toArray();
    }) getUsersTask;

}

用戶table.hbs

<table>
  <thead>
    <tr>
      <th>
        <div class="first">Name</div>
      </th>
    </tr>
  </thead>
  <tbody>
    {{#if this.taskStatus.isRunning}}
    <tr>
      <td >
        <div class="h-64">
          {{ui-kit/loader}}
        </div>
      </td>
    </tr>
    {{else}}
    {{#each @users as |user|}}

    {{/each}}
    {{/if}}
  </tbody>
</table>

上面的組件在模板中的某處調用，並傳遞帳戶和頁面動態。

<UserTable 
  @account={{this.account}}
  @page={{this.page}}
  >          
</UserTable>

注意：它以無限循環運行。

Answer 1

我發現有兩件事要改變。 但不確定它們是否足以使其發揮作用。

第一點，

{{#each @users as |user|}}等同於this.args.users 。 但是在組件上定義了users數組。 所以它必須改為{{#each this.users as |user|}}

第二點，

taskStatus沒有返回任何內容。 所以{{#if this.taskStatus.isRunning}}每次都是false 。 正確的檢查將是{{#if this.getUsersTask.isRunning}} ，因為isRunning是任務的屬性。
但是當你改為{{#if this.getUsersTask.isRunning}} ，由於沒有人觸發getUserTask ，它將無法工作。 我認為你可以在一個生命周期鈎子（例如didInsertElement ）中啟動該任務。