-1

在我的 React ToDo 列表中，重新加载应用程序后，待办事项保持相同的 ID。

因此，如果我开始设置待办事项，它们的 id 将正确编号：0, 1, 2, 3, 4,...

todos: [{id: 0, text: "Create PWA", date: 1601244000000, completed: false},…]
0: {id: 0, text: "Create PWA", date: 1601244000000, completed: false}
1: {id: 1, text: "Use Hooks for Gorilla sound once", date: 1601416800000, completed: false}
...

但是，如果我重新加载，ID 将重置：

todos: [{id: 0, text: "Create PWA", date: 1601244000000, completed: false},…]
0: {id: 0, text: "Create PWA", date: 1601244000000, completed: false}
1: {id: 1, text: "Use Hooks for Gorilla sound once", date: 1601416800000, completed: false}
2: {id: 0, text: "dsadasd", date: 1600812000000, completed: false}
...

任何想法如何解决？ 代码沙盒链接

4

1 回答 1

1

快速浏览一下，您的问题似乎来自您设置 id 的方式，如下所示：

let nextTodoId = 0;

export const addTodo = (todo) => ({
    type: 'ADD_TODO',
    id: nextTodoId++,
    todo
});

第一次加载没问题，因为它将为零，然后添加的每个项目都会递增，但在重新加载时它将再次为 0。

解决此问题的方法是首先检查本地存储中是否存在状态，然后获取列表中最后一项的 id，然后将其用作基本 id - 如果没有最后一个 id，则再次将其设为 0

所以像下面这样的东西应该可以工作

function getBaseId() {
    const serialzedState = localStorage.getItem("state");
    if (serialzedState === null) return 0;
    const parsedState = JSON.parse(serialzedState);
    const todos = parsedState.todos
    return todos[todos.length - 1].id;
}

let nextTodoId = getBaseId();
于 2020-09-28T13:34:06.047 回答