Svelte中通过REST获取数据循环组件时如何获取组件值？

硬编码商品数据时功能正常，但改用REST接口获取商品列表后，Counter组件的amount值显示为undefined。

Counter.svelte 代码 #

<script>
    export let amount = 0;
    function increment() {
        amount += 1;
    }

    function decrement() {
        if (amount > 0) {
            amount -= 1;
        }
    }
</script>

<button on:click={decrement}>-</button>{amount}<button on:click={increment}>+</button>

App.svelte 代码 #

<script>
    import Counter from './Counter.svelte';
    import { onMount } from 'svelte';

    let items;

    onMount(async () => { getItemsFromDB() });
    async function getItemsFromDB() {
        // 修正原代码的语法错误，改为标准fetch调用
        const response = await fetch('MY_REST_API', { method: 'GET' });
        const data = await response.json();
        items = data;
    }
    /*
    REST返回的items数据结构：
    [{
        id: 1,
        name: 'potato',
        price: 5
    }, {
        id: 2,
        name: 'garlic',
        price: 3
    }, {
        id: 3,
        name: 'rice',
        price: 10
    }];
    */

    function purchase() {
        const itemsWithAmount = items.filter(i => i.amount !== 0)
        console.log(itemsWithAmount)
    }
</script>

<ul>
    {#each items as item}
    <li>
        {item.name} <Counter bind:amount={item.amount}/> <!-- 页面中显示UNDEFINED -->
    </li>
    {/each}
</ul>

<button on:click={purchase}>Purchase</button>

问题原因 #

从REST接口返回的每个商品对象没有amount属性，而Svelte的双向绑定bind:amount={item.amount}需要目标属性存在才能正常同步值。Counter组件里的默认值0无法自动添加到父组件的item对象上，导致渲染时显示undefined。

解决方案 #

在获取到REST数据后，给每个商品对象添加初始的amount属性，值设为0，确保双向绑定能正常工作：

修改getItemsFromDB函数：

async function getItemsFromDB() {
    const response = await fetch('MY_REST_API', { method: 'GET' });
    const data = await response.json();
    // 给每个商品添加初始amount属性
    items = data.map(item => ({ ...item, amount: 0 }));
}

效果验证 #

修改后，Counter组件会正常显示初始值0，用户点击加减按钮时，item对象的amount属性会同步更新。调用purchase函数时，会过滤出所有amount不为0的商品，输出符合预期的结构：

[
    {
        "id": 1,
        "name": "potato",
        "price": 5,
        "amount": 30
    },
    {
        "id": 3,
        "name": "rice",
        "price": 10,
        "amount": 400
    }
]

内容的提问来源于stack exchange，提问作者askwer