如何在 React 中重新加载时不重置 ID？

Question

在我的 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}
...

任何想法如何解决？ CodeSandbox Link

Answer 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();

如何在 React 中重新加载时不重置 ID？

How not to reset ID's on reload in React?

reactjs

ids