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

如何解决在React中如何在重载时不重置ID？

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

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

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

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

todos: [{id: 0,completed: false}
2: {id: 0,text: "dsadasd",date: 1600812000000,completed: false}
...

任何想法如何解决？ CodeSandbox Link

解决方法

快速浏览一下，您的问题似乎出在设置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();