使用 axios 和 v-for 时，我在 Vue 中不断收到“超出最大递归更新”的消息

Question

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

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

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

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

Answer 1

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

撤销（）

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

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

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

这种类型的操作（将源数据转换为要渲染的内容）最好放在计算中（参见下面的示例 -productsView在模板中使用而不是products）

也不要使用indexas:key。你似乎有_id一个可能是唯一的，所以用它作为密钥......

export default defineComponent({
  name: "Home",
  components: { ProductCard },
  data() {
     let products: { productId: string, productImage: string, productDesc: string, 
                     newPrice: number, oldPrice: number }[] = [];
     return { products };
  },
  computed: {
    productsView() {
      return this.products.map(p => ({
        // copy all product properties and add product_image_url
        ...p,
        product_image_url: p.product_image.reverse()[0].url
      }))
    },
  },
  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);
     }
  }
});