0
149
ViewsJavascript / React: elimine un elemento específico del almacenamiento local al hacer clic cuando se procesa en otro componente
Tengo una aplicación React (como Netflix) que muestra miniaturas de películas en la página de inicio.
Cuando hace clic en una miniatura, aparece una ventana modal donde puede hacer clic en un botón para agregar la película a su lista de seguimiento. Estas películas se guardarán en el almacenamiento local y si va al componente "Lista de observación", puede ver todas las películas favoritas que se muestran.
Aquí está el código que maneja el clic (esta función se almacena en el Contexto) (no uso useState porque una nueva representación desencadenaría un cambio en el fondo de la aplicación):
const storageArray = []; const handleWatchlist = (objectData) => { let index = storageArray.indexOf(objectData); if (index === -1) { storageArray.push(objectData); } else { storageArray.splice(index, 1); } localStorage.setItem('currentWatchlist', JSON.stringify(storageArray)); const retrieveData = JSON.parse(localStorage.getItem('currentWatchlist')); console.log(retrieveData); };Funciona perfectamente bien en la página de inicio. SIN EMBARGO, en el componente de la lista de vigilancia, si hago clic en una miniatura y luego hago clic en el botón para eliminar el elemento del almacenamiento, esto es lo que sucede:
Ejemplo: 1 película almacenada en localStorage, antes de hacer clic: 
Dentro del componente de la lista de seguimiento, después de hacer clic en el botón, para eliminarlo del almacenamiento y el componente: 
Cuando hago clic en el botón, en lugar de eliminar el elemento, no lo considera un duplicado y, por lo tanto, agrega un nuevo objeto al almacenamiento local (que se elimina si hago clic nuevamente).
¿Cómo puedo asegurarme de que cuando hago clic en el botón favorito en el componente Lista de seguimiento, el almacenamiento se actualiza correctamente y la película se elimina del componente?
Gracias por tu ayuda.
1 answers
Answer question0
Estás comenzando con una matriz vacía:
const storageArray = []; Y luego verifique si objectData está en la matriz o no con:
storageArray.indexOf(objectData); Esto nunca encontrará el elemento existente en localStorage porque nunca lee desde localStorage . Lo que debe hacer es, cuando se llama handleWatchlist :
- Leer desde
localStoragey analizar a una lista - Encuentre un elemento existente dentro de esa lista mediante una clave única de
objectData- Si está ahí, quítalo.
- si no, añádelo
Será algo como:
const handleWatchlist = (objectData) => { let storageArray = JSON.parse(localStorage.getItem("currentWatchlist")); let existingItem = storageArray.find(item => item.id === objectData.id); if (existingItem) { let result = storageArray.filter(item => item.id !== objectData.id); } else { let result = [...storageArray, objectData]; } localStorage.setItem("currentWatchlist", JSON.stringify(result)); };