Svelte点击器应用：解决keyed each重复键报错问题

你的问题根源在于keyed each要求每个key必须唯一——当计数到11时，数组变成[1,1]，两个元素的key都是1，违反了Svelte的key唯一性约束，导致报错。

最优解决方案：使用索引作为key #

因为你的数字列表是按固定位置存储每一位数字（比如个位、十位、百位依次排列），每个位置的索引是唯一且固定的，直接用索引作为key就能完美解决重复问题，同时保持代码的简洁性：

{#each numbers as number, index (index)}
    <h1 class="score-text">{number}</h1>
{/each}

为什么这个方案可行？ #

• Svelte通过key来跟踪列表中每个元素的状态和位置，索引index在数组中是唯一的，不会出现重复值；
• 你的场景中，数组的元素顺序不会发生变化（只是每个位置的数字更新），用索引作为key不会引发额外的渲染问题（如果是动态排序的列表，索引key可能有副作用，但这里完全适用）。

替代方案（可选） #

如果担心索引key的局限性（比如未来可能调整列表顺序），也可以给每个元素生成结合索引和数字的唯一key，比如：

{#each numbers as number, index (`${index}-${number}`)}
    <h1 class="score-text">{number}</h1>
{/each}

不过对于你的点击器场景，索引key已经足够简单高效，没必要额外复杂化。

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