是什么导致这个小型 Svelte 应用程序中出现“ctx[1] 不是函数”错误？

Question

我正在使用 Svelte 开发一个小型待办事项应用程序。我列出了来自 jsonplaceholder 的 10 个待办事项。

我在 App.svelte 中有这个：

<script>
    import { onMount } from "svelte";
    import Header from './Header.svelte';
    import ToDoList from './ToDoList.svelte';
    import Footer from './Footer.svelte';
    const apiURL = "https://jsonplaceholder.typicode.com/todos";
    const limit = 10;
    let todos = [];
    export let unsolvedTodos = [];
    
    onMount(() => {
        getTodos();
    });
    
    const getTodos = () => {
        fetch(`${apiURL}?&_limit=${limit}`)
        .then(res => res.json())
        .then((data) => todos = data)
        .then(getUnsolvedTodos);
    }
    
    const getUnsolvedTodos = () => {
        unsolvedTodos = todos.filter(todo => {
            return todo.completed === false;
        })
    }

    const deleteTodo = (todo) => {
        let itemIdx = todos.findIndex(x => x == todo);
        todos.splice(itemIdx, 1);
        todos = todos;
  }
</script>

<div class="app-wrapper">
  <div id="toDoApp">
        <Header />
    <ToDoList todos={todos} />
    <Footer />
  </div>
</div>

在 ToDoList.app 中：

<script>
    import TodoItem from './TodoItem.svelte';
    export let todos;
    let deleteTodo;
</script>

{#if todos.length > 0}
  <ul class="todo-list">
    {#each todos as todo, index}
        <TodoItem {todo} on:deleteTodo = {deleteTodo(todo)} />
    {/each}
  </ul>
{/if}

在 TodoItem.svelte 中：

<script>
    import {createEventDispatcher} from 'svelte';
    import { fade, fly } from 'svelte/transition';
    import { flip } from 'svelte/animate';
    export let todo;
    
    const dispatch = createEventDispatcher();
    const Delete = () => dispatch("deleteTodo", todo);
</script>

<li transition:fly="{{x:-100, duration:200}}">
    <input type="checkbox" checked="{todo.completed}" />
    <span class="title {todo.completed ? 'done' : ''}">{todo.title}</span>
    <button on:click="{Delete}"><i class="fa fa-trash" aria-hidden="true"></i></button>
</li>

我一定是遗漏了一些东西，因为我收到了错误 ctx[1] is not a function，这可以在 REPL 中看到。

我做错了什么？

Answer 1

在ToDoList.svelte 中，您正在调用deleteTodo(todo)，但deleteTodo 未定义。 Svelte 真的应该在这里抛出更好的错误信息......

编辑：

此外，如果您分配了一个事件处理程序，您希望传入对函数的引用，例如 on:deleteTodo = {() => deleteTodo(todo)} 或 on:deleteTodo = {deleteTodo}，而不是直接调用该函数。