Creé una funcionalidad para que los usuarios agreguen sus recetas favoritas a una lista, luego pueden ver una lista de sus recetas guardadas, sin embargo, estoy tratando de hacer que la variedad de recetas permanezca en el almacenamiento local para que los datos no se pierdan. actualizar.
Guardé los datos e intenté actualizar el estado a lo que hay en el almacenamiento local, pero los datos no persisten.
const [myRecipeState, dispatchMyRecipes] = useReducer(myRecipesReducer, {items: []}); const addItemHandler = (item) => { dispatchMyRecipes({val:'ADD', item: item}); } const removeItemHandler = (id) => { dispatchMyRecipes({val:'REMOVE', id: id}); } const myRecipesReducer = (state, action) => { if (action.val === 'ADD') { let updatedItems; let updatedItem; const existingItemIndex = state.items.findIndex(item => item.id === action.item.id) const existingItem = state.items[existingItemIndex]; const localRecipes = JSON.parse(localStorage.getItem('myRecipes')); if (existingItem) { updatedItems = [...state.items]; updatedItem = existingItem; updatedItems[existingItemIndex] = updatedItem; console.log('item already exists'); localStorage.setItem('myRecipes', JSON.stringify(updatedItems)); }else { updatedItems = state.items.concat(action.item); console.log('item added for the first time'); localStorage.setItem('myRecipes', JSON.stringify(updatedItems)); } return {items: localRecipes || updatedItems} } if (action.val === 'REMOVE') { let updatedItems; const localRecipes = JSON.parse(localStorage.getItem('myRecipes')); updatedItems = [...state.items].filter(item => item.id !== action.id); localStorage.setItem('myRecipes', JSON.stringify(updatedItems)); return {items: localRecipes || updatedItemsupdatedItems} } return {items: state.items} }Lo primero que está haciendo mal es que siempre comienza con una matriz vacía. Cambie su estado inicial para que elija lo que hay dentro del localStorage si lo hay y, si no, use una matriz vacía:
const initialData = localStorage.getItem("myRecipes") ? JSON.parse(localStorage.getItem("myRecipes")) : []; const [myRecipeState, dispatchMyRecipes] = useReducer(myRecipesReducer, { items: initialData }); Entonces deberías cambiar ligeramente myRecipesReducer ya que algunas cosas que tienes allí no son correctas, como esta localRecipes || updatedItems siempre localRecipes .
const myRecipesReducer = (state, action) => { if (action.val === "ADD") { const existingItemIndex = state.items.findIndex((item) => item.id === action.item.id); let updatedItems; if (existingItemIndex !== -1) { updatedItems = [...state.items]; updatedItems[existingItemIndex] = action.item; } else { updatedItems = state.items.concat(action.item); } localStorage.setItem("myRecipes", JSON.stringify(updatedItems)); return { items: updatedItems }; } if (action.val === "REMOVE") { const updatedItems = state.items.filter((item) => item.id !== action.id); localStorage.setItem("myRecipes", JSON.stringify(updatedItems)); return { items: updatedItems }; } return { items: state.items }; };El problema parece ser que las claves que está utilizando al configurar y obtener su estado difieren.
Puede agregar una const localstorageKey = 'myRecipes'; en la parte superior de su archivo. Luego, reutilice esta variable cuando llame a setItem y getItem . Esto le ahorrará algunos problemas de refactorización en el futuro y evitará errores como este.