使用 axios 和 v-for 时，我在 Vue 中不断得到 "maximum recursive updates exceeded"

Question

我正在构建一个电子商务网站，并为产品卡片创建了一个组件。我将该组件导入主页，以便显示产品列表。我声明一个变量 products in the 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>

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

Uncaught (in promise) Error: Maximum recursive updates exceeded. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.

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

Answer 1

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

Reverse()

The reverse method transposes the elements of the calling array object in place, mutating the array, and returning a reference to the array.

因此，每当模板呈现时，products 数组（而是元素）会发生变化，从而触发另一次呈现等。

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

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

另外 不要将 index 用作 :key。你似乎有 _id 这可能是独一无二的所以用它作为关键......

使用 axios 和 v-for 时，我在 Vue 中不断得到 "maximum recursive updates exceeded"

I keep getting "maximum recursive updates exceeded" in Vue when using axios and v-for

vue.js

vue-composition-api

vue-options-api