Svelte 待办事项应用程序错误:新的待办事项 id 属性永远不会大于 2

Question

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

我有以下代码用于添加新的待办事项：

<script>
import { onMount } from "svelte";

let todos = [];

onMount(async function() {
todos.reverse();
});

function addTodo() {
//Empty todo object
let newTodo = {};

//Set new todo object's properties (id, title, completed)
if (todos.length == 0) {
newTodo.id = 1;
} else {
newTodo.id = todos[todos.length - 1].id + 1;
}
newTodo.title = document.querySelector('#new_todo').value;
newTodo.completed = false;

//Add new todo at the beginning of the array
todos.unshift(newTodo);

todos = todos;
}
</script>
<div class="input-group p-2">
<input type="text" class="form-control" id="new_todo">
<div class="input-group-append">
<button on:click="{addTodo}" class="btn btn-sm btn-success">Add</button>
</div>
</div>

由于我无法找到的原因 - 我的待办事项的最大 id 是 2 - 没有仪表我添加多少。

在此处查看 REPL

。我的错误在哪里？

Answer 1

更改

newTodo.id = todos[todos.length - 1].id + 1;

自

newTodo.id = todos[0].id + 1;

因为您的第一个待办事项具有最大的 ID，而不是最后一个。

Answer 2

对我来说似乎既复杂又脆弱，为什么不记住最后一个插入 ID？

// ...

let todos = [];
let lastInsertId = 0;

function addTodo(){
//Empty todo object
let newTodo = {};

//Set new todo object's properties (id, title, completed)
newTodo.id = ++lastInsertId;
newTodo.title = document.querySelector('#new_todo').value;
newTodo.completed = false;

//Add new todo at the behining
todos.unshift(newTodo);
todos = todos;
}
// ...

还有为什么unshift()和reverse()，而不是只是不逆转并推到名单上？