来自React的背景，我在理解EmberJ的“跟踪”概念时遇到了一些问题。理论上，它不应该与“React状态”不同。
所以我所理解的是，当我们用@tracked声明一个属性时，当这个属性发生变化时，它应该会导致重新渲染。
请查看以下代码：

产品项目组件

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { inject as service } from '@ember/service';
import { action } from '@ember/object';

export default class ProductItemIndexComponent extends Component {
  @service('cart') cartService;

  @tracked addedToCart = false;

  @action
  checkItemInCart(id) {
    if (this.cartService.items.findBy('id', id)) {
      this.addedToCart = true;
    } else {
      this.addedToCart = false;
    }
  }
}

模板，

<div class="card-container">
  <div class="card product-item" {{did-insert (fn this.checkItemInCart @item.id)}}>
    <img src={{@item.image}} class="product-image card-img-top" alt="...">
    <div class="card-body">
      <h5>{{@item.title}}</h5>
    </div>
    <div class="footer">
      <p class="card-text"><span class="badge badge-secondary"><strong>Price: </strong>{{@item.price}}</span></p>
      <button type="button" class="btn btn-warning" {{on 'click' (fn @handleCartAction item)}}
        disabled={{this.addedToCart}}>Add
        to cart</button>
    </div>
  </div>
</div>

当我第一次渲染组件时，我使用{{did-insert (fn this.checkItemInCart @item.id)}}检查当前项目是否存在于购物车中，如果它存在，我将跟踪的属性@tracked addedToCart = false;切换为true或false。
理论上，这应该会在我的productItem模板中找到cartService中的Item后立即禁用我的按钮。只有当我转到另一个页面然后返回时，它才能工作。
但这一页没有重读。有人能帮我理解我可能做错了什么吗？
提前谢谢你