0
264
ViewsReaccionar, perder datos guardados en localStorage con useEffect después de actualizar la página
Esta es probablemente una pregunta de novato, pero estoy enfrentando algunos problemas con el gancho useEffect() . Tengo una aplicación para tomar notas y quiero que los datos persistan. Estoy usando 2 useEffect s: uno para cuando la página se actualiza/carga por primera vez y otro para cuando agrego una nueva nota a mi aplicación.
Puse algunos registros para verificar lo que está sucediendo:
const [notes, setNotes] = useState([ { noteId: nanoid(), text: 'This is my 1st note!', date: '30/07/2022' }, { noteId: nanoid(), text: 'This is my 2nd note!', date: '30/07/2022' } ]) // 1st time the app runs useEffect(() => { const savedNotes = JSON.parse(localStorage.getItem('react-notes')) console.log('refresh page call:',savedNotes) if(savedNotes) { setNotes(savedNotes) } }, []) //every time a new note is added useEffect(() => { localStorage.setItem('react-notes', JSON.stringify(notes)); console.log('new note call:', notes) }, [notes])El comportamiento es un poco extraño, porque cuando se actualiza la página, los nuevos datos aparecen dentro del registro, pero luego desaparecen, manteniendo solo los datos codificados:
También hace más llamadas de las que esperaba. ¿Alguna idea de lo que está pasando aquí?
1 answers
Answer question0
Tema
El problema es causado por el useEffect a continuación y cómo está configurando inicialmente el estado:
useEffect(() => { localStorage.setItem('react-notes', JSON.stringify(notes)); console.log('new note call:', notes) }, [notes]) El useEffect anterior se ejecuta cada vez que cambian las notes , pero también en el montaje. Y en el montaje, el estado es igual a la matriz inicial dada a useState . Entonces localStorage está configurado para esa matriz.
Solución
Una solución es cambiar la forma en que está configurando el estado como se muestra a continuación, de modo que elija lo que hay en el localStroge si hay algo, y de lo contrario use esa matriz inicial que tiene:
const [notes, setNotes] = useState( !localStorage.getItem("react-notes") ? [ { noteId: nanoid(), text: "This is my 1st note!", date: "30/07/2022", }, { noteId: nanoid(), text: "This is my 2nd note!", date: "30/07/2022", }, ] : JSON.parse(localStorage.getItem("react-notes")) );