Hola que tal me está pasando algo realmente curioso y no sé a que se debe, yo estoy haciendo un todolist, y las notas que el usuario va generando dinámicamente, se almacenan en el localStorage, esto lo hago con el siguiente código :
En el componente App.js
const [notes, setNotes] = useState([]);
const [searchText, setSearchText] = useState('');
const [darkMode, setDarkMode] = useState(false); //cambia el template de la app
//Se encarga de mostrar la nota para escribir
const [showNote, setShowNote] = useState(true); //eslint-disable-line
useEffect(() => {
const saveNotes = JSON.parse(localStorage.getItem('notes-data'));
if (saveNotes){
setNotes(saveNotes);
}
}, []);
useEffect(() => {
localStorage.setItem('notes-data', JSON.stringify(notes))
},[notes])
const addNote = (inputText, text) => { //ese text, es el texto úncamente del textArea
const date = new Date();
const newNote = {
id: nanoid(),
title: inputText,
text: text,
date: date.toLocaleString()
}
const newNotes = [newNote, ...notes];
setNotes(newNotes)
}
Siguiendo en el componente App.js
el valor que es un array que tiene notes
lo paso como prop a través de un filtrado, a otro componente, <Pagination data={filterNotes} />
.
const filterNotes = notes.filter((noteText) => noteText.title.toLowerCase().includes(searchText));
return (
<div className={darkMode ? 'dark-mode' : ''}>
<div className="container">
<Header
handleToggleTheme={setDarkMode}
/>
<Search
handleSearchNote={setSearchText}
setShowNote={setShowNote}
/>
<Pagination
data={filterNotes}
handleAddNote={addNote}
handleDeleteNote={deleteNote}
searchText={searchText}
/>
</div>
</div>
)
Pues bien en mi componente Pagination
, necesito hacer un useEffect con el siguiente código:
const Pagination = (props) => {
const { data, handleAddNote, handleDeleteNote } = props;
// We start with an empty list of items.
const [currentItems, setCurrentItems] = useState([]);
const [pageCount, setPageCount] = useState(0);
// Here we use item offsets; we could also use page offsets
// following the API or data you're working with.
const [itemOffset, setItemOffset] = useState(0);
const itemsPerPage = 9;
useEffect(()=>{
setItemOffset(0)
},[data])
return (
<>
<NoteList
notes={currentItems}
handleAddNote={handleAddNote}
handleDeleteNote={handleDeleteNote}
/>
//Resto de código
.
.
.
.
Si intento hacer cambios en el componente Pagination, dentro del useEffect que veis, no sé que le ocurre a la aplicación que los datos almacenados previamente en localStorage se borran todos, actualmente las notas son de testeo y su contenido no es importante, pero no me da seguridad, imaginar que tengo notas que no quiero borrar, y al hacer un cambio de código se borra todo.. ¿Alguien sabe que puede estar ocurriendo? ¿Hay alguna forma de recuperar las notas borradas previamente almacenadas en localStorage?
Cuando se borran las notas, inspeccionando con el developer tools, veo que la variable notes-data lo que tiene es un array vacío [].
Un saludo y gracias de antemano.