Astro+Svelte:两个单独的按钮注册一次点击

Question

我正在与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会发生这种情况的加分。。。

Answer 1

自0.25.0版本起，此问题已得到修复。