Svelte todo app bug:title 属性返回未定义

Question

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

在我的观点中，我有：

<div class="input-group p-2" id="editForm">
<input type="text" class="form-control" id="old_todo" value={currentToDo.title} placeholder="Edit Todo">
<div class="input-group-append">
<button on:click="{addTodo}" class="btn btn-sm btn-success">Save</button>
</div>
</div>
//More code
{#each todos as t, index}   
<tr>
<td>{index + 1}</td>
<td class="{t.completed == true ? 'completed' : ''}">{t.title}</td>
<td class="text-center"><input type="checkbox" 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>
{/each}

我认为脚本的部分在这里是相关的：

<script>
import {onMount} from "svelte";
const apiURL = "https://jsonplaceholder.typicode.com/todos?_start=1&_limit=20";
let todos = [];
onMount(async function() {
const response = await fetch(apiURL);
todos = await response.json();
todos.reverse();
});
var currentToDo = {};
function editTodo(tid) {
let itemIdx = todos.findIndex(x => x.id == tid);
let currentToDo = todos[itemIdx];
}
<script>

在此处查看 REPL

。问题是文本字段<input type="text" class="form-control" id="old_todo" value={currentToDo.title} placeholder="Edit Todo">显示undefined而不是当前(正在编辑(待办事项标题。

我的错误在哪里？

Answer 1

好吧，currentToDo.title真的是undefined...

如果要避免此显示，可以更改为currentToDo.title || ''：

<input type="text" class="form-control" id="old_todo" value={currentToDo.title || ''} placeholder="Edit Todo">

另外，为了让您编辑按钮工作...

更改此设置：

<button on:click="{editTodo(t.id)}" class="btn btn-sm btn-primary">Edit</button>

对此：

<button on:click="{() => editTodo(t.id)}" class="btn btn-sm btn-primary">Edit</button>

on:click="{editTodo(t.id)}变得on:click="{() => editTodo(t.id)}，否则每次渲染都会调用一次editTodo函数，但不会在实际单击按钮时调用一次(例如，在 Svelte 中，您传递的是函数引用，而不是像普通 HTMLonclick那样传递函数体(。

此外，在editTodo函数中：

function editTodo(tid){
let itemIdx = todos.findIndex(x => x.id == tid);
let currentToDo = todos[itemIdx];
} 

您需要删除此let才能使用根作用域currentToDo，而不是局部作用域变量：

function editTodo(tid){
let itemIdx = todos.findIndex(x => x.id == tid);
currentToDo = todos[itemIdx];
} 

然后，您可以单击"编辑"按钮，标题将按预期显示在输入字段中！