0

Tengo un Array de Objetos que obtengo de Firebase y lo guardo en LocalStorage como Products, este Objeto guardado en LocalStorage lo renderizo con el Metodo Map, cada uno de estos objetos tiene una propiedad en False, que cuando hago click lo modifica a True y este se modifica en LocalStorage, por ende, cada vez que modifico un propiedad de False a True, este tambien se ve reflejado en LocalStorage, pero cuando recargo la página todos los objetos en LocalStorage vuelven a su estado original con su propiedad en False, lo cual es raro porque ya lo modifique a True.

Esto sucede porque tengo el codigo localStorage.setItem("Products", JSON.stringify(products)); todo el tiempo en el programa, Lo que hace que cada vez que recargue la página, el programa me trae los datos originales de Firebase, que estan todos en False.

  • Si dejo en el programa localStorage.setItem("Products", JSON.stringify(products));, cada vez que recargue la página me va a traer las propiedades originales que estan en Firebase, que son propiedades en False, por ende, no importa que yo modifique las propiedades a True con un Click y lo guarde en LocalStorage, siempre me va a traer los valores originles que estan en False.

  • Cuando borro localStorage.setItem("Products", JSON.stringify(products)); y modifico alguna propiedad de False a True, y recargo la página, LocalStorage SI me mantiene la propiedad en True, que es lo que yo quiero, el problema esta en que cuando abro la página en otro navegdor me sale un error que dice Cannot read properties of null (reading 'map'), esto sucede porque en los demas navegadores NO existe Productsen su LocalStorage y por ende no puede leér la propiedad Map que uso para renderizar desde LocalStorage.

ya intente con un condicional verificar si existe Products en su LocalStorage, pero SIEMPRE me devuelve un Array vacío

  • Si solo pongo localStorage.setItem("Products", JSON.stringify(products)); SI me guarda los datos en LocalStorage con la Key Products y el Value con Objetos, Pero cuando lo hago con un Condicional NO, por Ejemplo

  • if(localstorage.getItem('Products') === null){localStorage.setItem("Products", JSON.stringify(products)) con este condicional para verificar si existe o no Products y así guardar el objeto en caso de que no exista en localStorage, siempre ve devuelve un array vacio

6
  • Hola, creo que tienes un problema de conceptos. Tanto firestore (Lo que llamas firebase) como localstorage son formas de almacenar datos. Si ya tienes los datos almacenados en Firestore, para qué quieres almacenarlos en Localstorage? Si la respuesta es para que se carguen más rápido al usarlos, entonces tienes que pensar en localstorage como un mecanismo de caché. De otra manera simplemente modifica la propiedades de los objetos directamente en Firestore. De esa manera cuando recargues la página los datos que traigas de firestore seguirán con el valor que modificaste. el 28 jul. 2022 a las 11:37
  • Ahora si quieres que los datos de Firestore no se modifiquen, y sean una especie de datos por defecto para todos los usuarios, entonces ahí tiene sentido usar LocalStorage. Lo básico que debes hacer es siempre preguntar si existen los datos en Localstorage if (localstorage.get("key"). Este condicional debe estar al principio de todo, y va a definir si traes los datos desde firestore o desde Localstorage. Es decir, si existe algo guardado en Localstorage, lo traes de ahí. Si no hay nada en Localstorage traes los datos desde firestore (es la primera vez que se abre la app). el 28 jul. 2022 a las 11:40
  • 1
    Y por último, agrega el código del componente en cuestión. te recomiendo que hagas el recorrido de bienvenida y leas Cómo preguntar y ejemplo mínimo verificable. Saludos el 28 jul. 2022 a las 11:41
  • @AndresGardiol Yo a los datos de FireStore los gurdo en LocalStorage y desde LocalStorage los renderizo porque necesito que cuando alguien le de Like a un producto, este cambie si propiedad a True, se guarde en localSotrage y se muestre siempre que recargues la página, si lo guardo en un useState de React cuando actualiza se borra, por ende siempre necesito que se renderizen los datos de LocalStorage, así se muestrn siempre los Likes Acá dejo el código en una foto porque sino los muestra mal acá prnt.sc/xCUPUoZr_9HS el 28 jul. 2022 a las 20:42
  • @AndresGardiol Así como muestro en la imagen, siempre cuando recargo me devuelve los objetos en su estado original ue estan en False, por ende los Likes se pierden, si borro el localtorage.setItem me funciona bien, pero no puedo abrir desde otro navegador poruqe no puede leer la propiedad map, y si le agrego un condicional if (localstorage.getItem("key") me devuelve un array vacío siempre -Le pongo getItem, porque si le pongo solo get, me devuelve un error que no existe. el 28 jul. 2022 a las 20:44

0

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies