Javascript 从选择输入列表中删除元素时，选择输入获取上一个选择输入的值

我已经在Svelte中创建了一个选择输入列表。目标是选择一个日期并批准该日期的项目。如果选择了新日期，则应从当前列表中删除该项目，并将其附加到已批准的列表中。请参阅下面的代码

Home.svelte：

 {#each $dummyStore.currentStates as currentState}
     <ListItem {currentState}/>
 {/each}

ListItem.svelte：

<script>
    import {dummyStore} from "../stores/dummyStore";

    export let currentState;
</script>

<div>
    <div class="columns">
        <div class="column">
            <p>
                {currentState.id}
            </p>
        </div>
        <div class="column">
            <p>
                {currentState.name}
            </p>
        </div>
        <div class="column">
            <select id={currentState.id}
                    name={currentState.id}
                    on:change={e => dummyStore.addApprovedDate(currentState.id, e.target.value)}>
                 <option disabled selected value> -- select an option --</option>
                 {#each currentState.available_dates as date}
                     <option value={date}>{date}</option>
                 {/each}
             </select>
        </div>
    </div>
</div>

每当我选择日期时，该项目将从$dummyStore.CurrentState中删除，并附加到另一个已批准的列表中。但是，选择输入列表中的下一项将预选上一项的值。我最初认为这是因为我没有绑定select元素的值，但这似乎并没有解决我的问题

---

有人能给我指出正确的方向吗？

为了解决这个问题，您在Home.svelte中的代码应该在每个块中使用一个键控键。目前，Svelte不会从DOM中删除以前的select输入，只会更改其值。因此，旧的输入值将在新的select元素中预选。为了确保Svelte销毁旧元素，您应该为元素使用一个键

您可以从Svelte文档中看到本教程中的确切问题和解决方案：

要解决您的问题，请将Home.svelte中的代码更改为：

 {#each $dummyStore.currentStates as currentState (currentState.id)}
     <ListItem {currentState}/>
 {/each}

请参阅这篇stackoverflow文章，并提供更详细的解释：