javascript - 在Svelte组件中未调用时触发的函数

我正在尝试通过构建一个简单的待办事项应用程序来开发Svelte。这是整个组件：

<script>
    let newTask = '';
    let showCompleted = true;

    let tasks = [{
        name: 'Test task',
        completed: false
    },
    {
        name: 'Test task 2',
        completed: true
    }];

    $: filterTasks = tasks.filter(task => showCompleted === true ? true : task.completed === false);

    function addTask() {
        tasks = [...tasks, {
            name: newTask,
            completed: false
        }];
        newTask = '';
    };

    function updateTask(updatedTask) {
        tasks = tasks.map(task => {
            if(task === updatedTask) {
                return {...updatedTask, completed: !task.completed};
            } else {
                return task;
            }
        });
    };
</script>

<h1>To-do</h1>

<label><input type="checkbox" bind:checked={showCompleted}> Show completed</label>

<ul>
    {#each filterTasks as task}
        <li>
            <input type="checkbox" checked={task.completed} on:change={updateTask(task)}>
            {task.name}
        </li>
    {/each}
</ul>

<input type="text" bind:value="{newTask}">
<button on:click|preventDefault={addTask}>Add</button>

但是我遇到了多个问题：


在页面加载时，每个任务都会触发updateTask，并且在单击复选框时不再起作用
过滤完整任务不起作用
当我添加任务时，它直接完成了最后一个


我有种感觉，我可能在某个时候错过了一些东西，这正在引起所有这些问题，但是却无法找到原因。

最佳答案

因此，您错过的事情是您需要将回调函数传递给on:change事件处理程序，即on:change={() => updateTask(task)}。现在，它只是立即调用updateTask。
这是updated REPL，我无法复制您提到的其他问题

关于javascript - 在Svelte组件中未调用时触发的函数，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56719353/