Keyed each blocks

Basic Svelte / Logic

Part 1/ Logic/Keyed each blocks

デフォルトでは、each ブロックの値を変更すると、ブロックの 末尾 で DOM ノードが追加・削除され、変更された値が更新されます。これはあなたが期待した動作ではないかもしれません。

説明するより見ていただいたほうがおわかり頂けるでしょう。この <Thing> コンポーネントでは初期化時に絵文字を定数としてセットしていますが、name は prop として渡されています。

'Remove first thing' ボタンを何回かクリックすると、以下のことが発生します:

1. 一番最後のコンポーネントが削除される
2. 残りの DOM ノードの name の値が更新されるが、絵文字は更新されず、それぞれの <Thing> が作成されたときのまま固定されている

代わりに、先頭の <Thing> コンポーネントとその DOM ノードだけを削除して、残りには影響を与えないようにしたいと思います。

そのためには、each ブロックの each イテレーションに一意な識別子 (または"key") を指定します。

{#each things as thing (thing.id)}
	<Thing name={thing.name}/>
{/each}

ここで、(thing.id) は key であり、値 (この例では name) が更新されたときに何を更新するのか Svelte に指示しています。

Svelte は内部的に Map を使用しているので、どんなオブジェクトでもキーとして使用できます。つまり (thing.id) の代わりに (thing) を使うことができます。しかし、文字列または数値を使用する方が一般的に安全です。なぜなら、例えばAPIサーバーからの新しいデータで更新する場合に、参照が等しくなくても同一性が持続することを意味するからです。