0

我正在与 Astro 和 Svelte 合作，用具有多种变体的产品组成一个页面。用户可以选择他们想要的变体，并将其添加到 Svelte 商店。

这在 Svelte 世界中运行良好，您单击按钮并添加单个产品，具体取决于您在本示例中单击 REPL 的哪个按钮。

但是，当我使用 Astro 渲染页面并使用相同的 Svelte 组件时，它会将两种产品都添加到购物车中：

<script>
    export let products = [
        {
            id: 1,
            description: "this is a product",
            prices: [
                {
                    id: 1,
                    nickname: '10g',
                    unit_amount: 1.00,
                 },
                {
                    id: 2,
                    nickname: '20g',
                    unit_amount: 2.00
                 }
            ]
        },
        {
            id: 2,
            description: "this is another product",
            prices: [
                {
                    id: 3,
                    nickname: '80g',
                    unit_amount: 18.00
                  }
            ]
        }
    ];
</script>

    <main>
            {product.description && (<p>{product.description}</p>)}
            {product.prices.data.map(price => (
                <div class="card lg:card-side card-bordered">
                    <div class="card-body">
                        <h2 class="card-title">{price.nickname}</h2> 
                        <p>{toCurrency(price.unit_amount)}</p>
                        <div class="card-actions">
                            <AddToCart propsData={price} product={product} client:load />
                        </div>
                    </div>
                </div> 
            ))}
        </main>

（请参阅Svelte REPL了解<AddToCart />）

任何想法如何获得预期的行为？帮助我理解为什么在 Astro 中发生这种情况的奖励积分......

4

0 回答 0