svelte - TypeError: each_blocks[i] 在 Svelte 中为空

Question

我在 Svelte 中创建和更新组件列表时遇到问题。我有一个 TodoItems 列表，即：

应用程序.html

<!-- ... -->
<!-- The culprit -->
{#if todos.length}
  {#each todos as todo, i}
    <TodoItem
     on:remove='remove(i)'
     title={todo.title}
   />
  {/each}
{/if}
<script>
import TodoItem from './TodoItem.html';

export default {
 components: {
   TodoItem,
 },
 data() {
   return {
     todos: [{ title: 'Hello World' }],
   };
 },
 methods: {
   remove(key) {
     let { todos } = this.get();
     this.set({
       todos: todos.filter((_, i) => i !== key),
     });
   },
 },
};
</script>

TodoItem.html

<li>
  <div class="view">
    <label>{title}</label>
    <button on:click='fire("remove")' class="destroy"></button>
  </div>
</li>

更新列表时会出错Cannot read property 'i' of null（chrome）或TypeError: each_blocks[i] is null（firefox）。

这是一个REPL 示例。