ember.js - 我们不能在 glimmer 组件 getter 中放置一个 ember 并发任务，它正在跟踪组件参数

Question

-- 当 ember 并发任务被称为 glimmer components 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;

}

用户表.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。我认为您可以在生命周期 Hook 之一(例如 didInsertElement)中启动该任务。