是什么导致我的 Svelte 应用程序中出现此“无法读取未定义的属性 'title'”错误？答案

【问题标题】：What causes this "cannot read property 'title' of undefined" bug in my Svelte app?是什么导致我的 Svelte 应用程序中出现此“无法读取未定义的属性 'title'”错误？
【发布时间】：2021-01-18 13:15:47
【问题描述】：

我正在 Svelte 中开发一个用于学习目的的小型 Todo 应用程序（我是 Svelte 新手）。

在 App.svelte 中，我将 TodoItem 组件循环导入 todosarray：

import TodoItem from './TodoItem.svelte';
//more code

{#each todos as t, index}<TodoItem />{/each}

在TodoItem.svelte 我有：

<script>
    import { createEventDispatcher } from 'svelte';
    export let index;
    export let t;
    export let id;
    export let title;
    export let completed;
    
    function deleteTodo(tid){
        let itemIdx = todos.findIndex(x => x.id == tid);
        todos.splice(itemIdx,1);
        todos = todos;
    }
    
    function editTodo(tid) {
        isEditMode = true;
        let itemIdx = todos.findIndex(x => x.id == tid);
        currentToDo = todos[itemIdx];
    }
    
    function completeTodo(tid){
        let itemIdx = todos.findIndex(x => x.id == tid);
        let todo = todos[itemIdx];
        todo.completed = !todo.completed;
        todos = todos;
    }
</script>

<tr>
    <td>{index + 1}</td>
    <td class="{t.completed == true ? 'completed' : ''}">{t.title}</td>
    <td class="text-center"><input type="checkbox" checked="{t.completed}" on:change={completeTodo(t.id)}></td>
    <td class="text-right">
        <div class="btn-group">
            <button on:click="{() => editTodo(t.id)}" class="btn btn-sm btn-primary">Edit</button>
            <button on:click="{deleteTodo(t.id)}" class="btn btn-sm btn-danger">Delete</button>
        </div>
    </td>
</tr>

由于我没有弄清楚的原因，我在这个组件中收到了一个Cannot read property 'title' of undefined 错误，正如 REPL 所示。

我做错了什么？

【问题讨论】：

标签： svelte svelte-3 svelte-component svelte-2

【解决方案1】：

“cannot read something of thing”错误表示您正试图访问名为“thing”的变量的“something”属性。
所以在你的情况下.. “无法读取未定义的属性标题”表示您正在尝试访问未定义内容的属性“标题”。
在您的代码中，我只能看到您尝试访问属性“title”的一个对象。
t.title.
所以错误是说 t 变量没有定义。
您有问题的代码行是：
{#each todos as t, index}<TodoItem />{/each}.
因为您没有将 TodoItem 发送到它所期望的 t 变量。
改成：
{#each todos as t, index}<TodoItem t/>{/each}

【讨论】：