如何在svelte{#each}块的第一个索引上添加项

Question

我将项目添加到列表的第一个位置。在｛#each｝部分中，循环列表并显示每个带有组件的项。来源在这里(REPL(和下面。每次我添加项目时，它都会在底部显示我添加的不同项目，尽管我在列表的顶部添加了项目。

有人知道这是什么原因吗？

App.svelte

<script>
    import ListItem from "./listItem.svelte";
    let list = [
        {id : [1,2,3,4,5]},
        {id : [3,4,5,6,7]}
    ];
    
    function addItem(){
        list = [
            {id:[5,6,7,8,9]}
            , ...list
        ]
        console.log(list)
    }
</script>
<button on:click={addItem}>click</button>
{#each list as item}
    <ListItem data={item}/>
{/each}

listItem.svelte

<script>
export let data = {};
let ids = data.id.join(' ');
</script>
<div>
    {ids}
</div>

Answer 1

Svelte默认情况下在末尾添加项，为了获得正确的结果，您需要使用一个将数据与组件唯一关联的键。密钥在每个中的括号中定义，并且项目本身可以是有效密钥：

{#each list as item (item)}

文件：

如果提供了键表达式(该表达式必须唯一标识每个列表项(，Svelte将在数据更改时使用它来区分列表，而不是在末尾添加或删除项。键可以是任何对象，但建议使用字符串和数字，因为它们允许在对象本身发生更改时保持身份。