Estoy tratando de crear una aplicación de lista de tareas con ReactJs, trabajando con localStorage , setItem() funciona bien, pero getItem() no devuelve nada excepto una matriz vacía.
|| "" porque JSON.parse() devuelve string || null en TypeScript. useEffect(() => { localStorage.setItem("todos", JSON.stringify(todos)); }, [todos]); useEffect(() => { const items = JSON.parse(localStorage.getItem("todos") || ""); if (items) { setTodos(items); } }, []); Aquí es donde proporciono datos a todos
const [todos, setTodos] = useState<todosObj[]>([]); const [count, setCount] = useState(1); const [status, setStatus] = useState<"All" | "completed" | "uncompleted">( "All" ); const [inputText, setInputText] = useState(""); const [date, setDate] = useState(new Date()); const inputHandler = (e: React.FormEvent<HTMLInputElement>) => { setInputText(e.currentTarget.value); }; const submitHandler = (e: React.FormEvent<HTMLButtonElement>) => { e.preventDefault(); setCount(count + 1); if (inputText !== "") { setTodos([ ...todos, { id: count, text: inputText, completed: false, date: date, }, ]); } setInputText(""); };Lo siento, no tengo suficiente reputación para comentar, así que tengo que publicarlo como respuesta:
¿Están configurados los datos iniciales para todos ? Es mejor si puede proporcionar dónde proporciona datos a todos .
useEffect(() => { const stringifyTodos = JSON.stringify(todos) localStorage.setItem("todos", stringifyTodos); }, [todos]); useEffect(() => { const storedTodos = localStorage.getItem("todos") const items = JSON.parse(storedTodos); if (items) { setTodos(items); } }, []);Prueba de esta manera, creo que funcionará.
Solucioné el problema inicializando el estado de todos por getItem()
como esto :
const [todos, setTodos] = useState<todosObj[]>( JSON.parse(localStorage.getItem("todos") || "") || [] );Si alguien sabe la razón por la que no funcionaba, por favor dígame.