我使用 stencil.js 創建了一個簡單的目錄項組件。在組件中有一個畫布標簽，我在其上繪制了動畫曲線。在 componentDidLoad 函數中，我定義了畫布，對其進行初始化并調用 animate 函數。這是組件本身的代碼：import { Component, Host, h, Prop, Element  } from "@stencil/core";import { Item } from "../hotb-catalog-container/data";import { initCanvas, init, animate } from "./wave.js";import axios from "axios";@Component({  tag: "hotb-catalog-item",  styleUrl: "hotb-catalog-item.scss",  shadow: false,})export class HotbCatalogItem {  @Prop() item: Item;  @Element() el: HTMLElement;  // @Event({ bubbles: true, composed: true }) itemSelect: EventEmitter<Item>;  itemSelected(event: Event) {    event.preventDefault();    //sessionStorage.setItem("item", JSON.stringify(this.item));    axios.post("/item", { item: this.item }).then(() => {      window.location.href = "http://localhost:3000/item";    });  }  componentDidLoad() {    let canvas = this.el.querySelector('canvas');    initCanvas(canvas);    init();    animate();  }  render() {    return (      <Host>        <div class="heading">          <h1>{this.item.name}</h1>          <span> ?{this.item.origin} &#183; {this.item.taste}</span>        </div>        <div class="center-part">          <div class="center-part__img"></div>          <div class="center-part__icon center-part__icon--temp">            {this.item.temp}&deg;C          </div>          <div class="center-part__icon center-part__icon--time">            {this.item.time}          </div>        </div>        <a          href="/item"          onClick={this.itemSelected.bind(this)}          class="primary-btn homepage__tea"        >          ?????        </a>        <canvas></canvas>      </Host>    );  }}最終結果是組件顯示畫布和線條，但動畫僅在其中之一中發生。其余的在初始狀態下是靜態的。請告訴我為什么會發生這種情況以及我可以采取哪些措施來修復它，以便所有組件都可以動畫化。需要注意的是，當我刷新代碼并且瀏覽器通過熱重載刷新時，另一個組件會在每次刷新時啟動動畫，依此類推。