vue.js - 无法循环遍历 Vue 3 Reactive Array Prop (代理)

Question

任务
我在一个产品市场上工作。每个产品都有一个 ID 和一系列与每个产品相关的信息。
有一个产品包的概念，它只是一个产品，它是其他产品的捆绑。
在 GET PACKAGES 响应中，有一组与此包中的产品相关的 ID。在页面上的其他位置，我请求产品列表，所以我已经有了我需要的数据，我只需要连接两个数据集。
该任务涉及在 UI 中显示包，以及通过两个数据集之间的 ID 连接的每个产品的描述(在 GET PRODUCTS 的另一个响应中)。
设置说明
我有一个父组件，它调用 GET PRODUCTS 和 GET PACKAGES。
我将包传递给可重用的 Vue 组件，以在 UI 中显示该包的基本信息。除此之外，我还将所有产品向下传递给组件，以便我们可以获得正确的产品描述以显示在包 UI 的预览中。
问题
当将产品列表传递给子组件时，我可以很好地控制台记录整个产品阵列，但是第二次我尝试遍历它们(通过 MAP 或 FOREACH)没有任何 react 。循环内没有控制台日志；就像循环甚至没有运行一样。
父组件代码

<package 
    v-for="package in packages" 
    :key="package.id"
    :packages="package"
    :products="products"
></package>

// I get both sets of data in beforeOnMount and push it to the below variables
const packages = reactive<Array<Package>>([]);
const products = reactive<Array<Product>>([]);

子组件代码

props: {
    packages: Object as () => Package,
    products: Object as () => Array<Product>
}

setup(props) {
    const uiPackages= reactive<Array<IPackageDetails>>([]);
    const productData = props.products;

    // This console log's a Proxy, with the handler containing an array of objects perfectly fine.
    console.log(productData);

    if (productData) {

        // This console log's undefined
        console.log(productData[0]);

        productData.forEach((product) => {

            // This does NOTHING in console!
            console.log(product)
        }
    }
}

子组件中productData的控制台日志

Answer 1

当子组件初始化时，products prop 仍然是一个空数组。您在控制台中看到数据的原因是因为当您单击它时，控制台会自行更新，届时父级的异步请求已完成。
这只发生在引用中，所以你看不到单个数组项 product[0]登录时没有引用。
使用 watch (或 watchEffect )在 Prop 上等待获取项目:

setup(props) {
  const productData = props.products;

  watch(() => productData.length, () => {
    productData.forEach((item) => {
      console.log(item)
    })
  })
}

或者，您可以使用 v-if在父级中:

<template v-if="packages.length && products.length">
  <package 
    v-for="package in packages" 
    :key="package.id"
    :packages="package"
    :products="products"
  ></package>
</template>