Empecé a aprender desarrollo web recientemente y esto me está haciendo doler la cabeza. Creé una aplicación de tareas sencillas en la que puedes agregar un elemento con id y valor a una matriz y eliminar el elemento de la matriz. Ahora quiero que cada vez que se actualice el sitio, quiero que los elementos estén allí. Hice una matriz de prueba y, por alguna razón, cuando se actualiza, funciona pero no con data .
const [items, setItems] = useState([]); const testarr = [{id: 1, value: "a"}, {id: 2, value: "b"}]; useEffect(() => { const data = JSON.parse(localStorage.getItem("items")); console.log(data); // setItems(testarr); setItems(data); }, []) useEffect(() => { window.localStorage.setItem("items", JSON.stringify(items)); }, [items]);Lo que se me ocurrió:
useEffect(() => { const data = JSON.parse(localStorage.getItem("items")); data.forEach(element => { setItems(oldarr => [...oldarr, element]); }); }, []) El problema es que, si sigo actualizando el sitio lo suficientemente rápido, eventualmente la matriz volverá a estar vacía. No entiendo, cuando se actualiza, registra data bien, pero cuando quiero setItems(data) que no funcionan. ¿Alguien sabe por qué se comporta así?
setState es una función asíncrona, esto implica que este fragmento de código a continuación siempre se ejecutará con elementos como matrices vacías antes de que los elementos reciban datos de "setItems (datos)".
useEffect(() => { window.localStorage.setItem("items", JSON.stringify(items)); }, [items]);tal vez, puede verificar si los elementos no son una matriz vacía antes de almacenar
useEffect(() => { if (Array.isArray(items) && items.length > 0) { window.localStorage.setItem("items", JSON.stringify(items)); } }, [items]);Intente localStorage sin objeto de ventana
Por ejemplo:
useEffect(() => { localStorage.setItem("items", JSON.stringify(items)); }, [items]); El siguiente useEffect se ejecuta cada vez que los items cambian, pero también en el montaje. Y en los items de montaje es igual a [] , esa matriz dada a useState al principio. Es por eso que localStorage se establece en [] .
useEffect(() => { window.localStorage.setItem("items", JSON.stringify(items)); }, [items]); Una forma de resolver este problema es cambiar la definición de su estado como se muestra a continuación, de modo que cuando haya datos en el localStorage , los elija:
const [items, setItems] = useState(!localStorage.getItem("items") ? [] : JSON.parse(localStorage.getItem("items"))); Y en este punto, puede eliminar esos dos useEffect s que tiene allí para obtener datos de localStorage y dárselos a setItems .