1

我正在构建一个电子商务网站，并为产品卡创建了一个组件。我将该组件导入主页，以便显示产品列表。我在 data(){} 中声明了一个 产品变量，还创建了一个 beforeMount 并将我的逻辑放入其中以使用 axios 获取数据。

<template>
  <div>
      <section class="new__products"> 
      <div class="container">
        <div class="inner-new-products">
          <home-page-title title-text="New products"></home-page-title>
          <div class="product-cards">
            <product-card
              v-for="(product, index) in products"
              :key="index"
              :product-id="product._id"
              :old-price="product.old_price"
              :new-price="product.new_price"
              :product-image="product.product_image.reverse()[0].url"
              :product-desc="product.product_description"
              :product-name="product.product_name"
            ></product-card>
          </div>
          <!-- :product-link="product.productLink" -->
        </div>
      </div>
    </section>
  </div>
</template>
<script lang="ts">
export default defineComponent({
  name: "Home",
  components: { ProductCard },
  data() {
     let products: { productId: string, productImage: string, productDesc: string, 
                     newPrice: number, oldPrice: number }[] = [];
     return { products };
  },
  async beforeMount () {
     console.log('Fetching.... ');
     try {
       let response = await net.http.get('/product?page=1&size=7');
       this.products = response.data.message;
     } catch (error) {
       console.log("ERROR: " + error);
     }
  }
});
</script>

每次我加载页面时，我都会收到错误消息：

未捕获（承诺）错误：超出最大递归更新。这意味着您有一个反应性效果，它正在改变它自己的依赖关系，从而递归地触发它自己。可能的来源包括组件模板、渲染函数、更新的钩子或观察者源函数。

当我将代码部署到生产服务器时，它会在我加载页面时崩溃。由于这个错误，整个网站都崩溃了，我很沮丧，不知道该怎么办。

4

1 回答 1

4

主要问题是Array.reverse在模板中使用。

逆转（）

reverse 方法将调用数组对象的元素转置到位，改变数组，并返回对数组的引用。

因此，每当模板渲染时，products数组（而是元素）都会更改，从而触发另一个渲染等。

此外，由于模板可以（并且通常会）多次呈现，因此多次应用reverse可能不是您想要的。

这种类型的操作（将源数据转换为要渲染的东西）最好放在计算中

也不要使用indexas:key。你似乎有_id这可能是独一无二的，所以用它作为键来代替......

于 2021-09-04T19:02:42.170 回答