苗條：Promise {<pending> 無法讀取未定義的屬性“邊緣”</pending>

Question

你好有人知道為什么我有這個錯誤嗎？

Promise { } 無法讀取未定義的屬性“邊緣”

<script>
    import { getProduct } from '../lib/store';
    const productId = 'a';
    
    const product =   getProduct(productId);
    $: console.log(product);

    let quantity = 0;
    let price = 0;
    let total = 0;
    $: quantity = quantity < 1 ? 1 : quantity;

    $: options = product.variants.edges.map((items) => {
        let list = {};
        list.id = items.node.id;
        list.color = items.node.selectedOptions[0].value;
        list.size = items.node.selectedOptions[1].value;
        list.price = items.node.priceV2.amount;
        return list;
    });

    $: console.log(options);
</script>

數據來自 Shopify API 謝謝！

Answer 1

您正在等待來自 getProduct 調用的 promise，因此您需要一個地方來放置 promise 的結果，然后您可以使用它們。 您看到錯誤是因為您試圖訪問不存在的 promise 的屬性variants ，因此 JS 按預期返回未定義。 然后你嘗試訪問未定義的edges並得到錯誤。

解決此問題的一種方法是執行以下操作：

1. 將產品公開為可變變量，並將初始值設置為 null：

let product = null;

2. 從 svelte 導入onMount方法，您可以使用它來運行異步方法，並等待 getProducts 的 promise，然后將其分配給產品變量：

import { onMount } from 'svelte'

.....

onMount(async () => {
  products = await getProduct(id);
});

3. 如果產品不是 null，請設置您的反應變量以有條件地使用產品：

$:options = product ?  product.variants.edges.map((items) => {
        let list = {};
        list.id = items.node.id;
        list.color = items.node.selectedOptions[0].value;
        list.size = items.node.selectedOptions[1].value;
        list.price = items.node.priceV2.amount;
        return list;
    }) : null;

4. 僅渲染依賴於選項的標記（如果存在）。

{#if options}
  /* Markup here dependent on options */
{/if}

現在，當從onMount重新分配product時，反應options變量將自動更新，並且數據和渲染將相應地流動。

您可以使用可選鏈接而不是我使用的三元運算符，但是在重新分配product之前， options將是未定義的，而不是 null。 這取決於您使用哪種方法，兩種方法都可以使用，但我喜歡更明確地使用 null，而不是相信編譯器會提供未定義的值。