问题描述
在我的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();