Tengo un proyecto básico que muestra una lista de notas y un botón que agregará una nueva nota a esa lista para que se muestre. Mi problema es que las nuevas notas no se agregan/recuperan del almacenamiento local y no estoy seguro de cuál es la causa.
import React, { useEffect, useState } from 'react' function App() { const [notesList, setNotesList] = useState([]) useEffect(() => { const notesJSON = localStorage.getItem('ayo') if (notesJSON != null) setNotesList(JSON.parse(notesJSON)) console.log(notesList) }, []) useEffect(() => { localStorage.setItem('ayo', JSON.stringify(notesList)) }, [notesList]) function addNote(e) { e.preventDefault() const newNote = { id: Date.now() + Math.random(), text: 'this is a new note', status: false, } setNotesList([...notesList, newNote]) } return ( <> <h1>Hello</h1> {notesList.map((note) => { return <h1 key={note.id}>{note.text}</h1> })} <form onSubmit={addNote}> <button type='submit'>Add Note</button> </form> </> ) } export default App;Simplemente elimine el registro de la consola del primer useEffect donde recuperamos datos de localStorage y donde actualizamos el estado de notesList si hay datos almacenados previamente en él. Para fines de registro, agregue un botón para verificar los datos almacenados en localStorage como se muestra a continuación .
No podemos ver los cambios de localStorage usando useEffect con deps notesList . Si lo intenta, siempre obtendrá datos que están un paso por detrás del valor de estado de notesList .
import React, { useCallback, useEffect, useState } from "react"; export default function App() { const [notesList, setNotesList] = useState([]); useEffect(() => { const notesJSON = localStorage.getItem("ayo"); notesJSON && setNotesList(JSON.parse(notesJSON)); }, []); // this will always log the data that one step behind the notelist state useEffect(() => { const notesJSON = localStorage.getItem("ayo"); notesList && console.log(JSON.parse(notesJSON)); }, [notesList]); useEffect(() => { if (notesList.length > 0) { localStorage.setItem("ayo", JSON.stringify(notesList)); } }, [notesList]); const addNote = useCallback(() => { const newNote = { id: Date.now() + Math.random(), text: "this is a new note", status: false, }; setNotesList([...notesList, newNote]); }, [notesList]); const resetNote = () => { localStorage.setItem("ayo", JSON.stringify([])); setNotesList([]); }; const logNote = () => { console.log(localStorage.getItem("ayo")); }; return ( <> <h1>Hello</h1> {notesList.map((note) => { return ( <div key={note.id}> <h1>{note.text}</h1> <p>{note.id}</p> </div> ); })} <button onClick={addNote}>Add Note</button> <button onClick={resetNote}>Reset Note</button> <button onClick={logNote}>Log Note</button> </> ); }El segundo useEffect es innecesario, debe configurar la lista adjunta a su estado y el almacenamiento en la función addNote y el primer useEffect debe usarse para cargar su estado inicial y eso es todo.
import React, { useEffect, useState } from "react"; function App() { const [notesList, setNotesList] = useState([]); useEffect(() => { const notesJSON = localStorage.getItem("ayo"); if (notesJSON != null) { setNotesList(JSON.parse(notesJSON)); } }, []); function addNote(e) { e.preventDefault(); const newNote = { id: Date.now() + Math.random(), text: "this is a new note", status: false }; const appendedList = [...notesList, newNote]; setNotesList(appendedList); localStorage.setItem("ayo", JSON.stringify(appendedList)); } return ( <> <h1>Hello</h1> {notesList.map((note) => { return <h1 key={note.id}>{note.text}</h1>; })} <form onSubmit={addNote}> <button type="submit">Add Note</button> </form> </> ); } export default App;