Estoy solicitando ayuda para configurar el estado de cartItems en almacenamiento local para que cuando nunca actualice, todavía obtenga los artículos.
import React, { createContext, useState } from 'react'; export const AppContext = createContext(); export function Context(props) { const [cartItems, setCartItems] = useState([]); const cart = (item) => { const exist = cartItems.find((x) => x.id === item.id); if (!exist) { setCartItems([...cartItems, { ...item }]); } else { alert('Item Already Taken'); } }; const onAdd = (items) => { console.log(cartItems); const exist = cartItems.find((x) => x.id === items.id); if (exist) { setCartItems( cartItems.map((x) => x.id === items.id ? { ...exist, qty: exist.qty + 1 } : x, ), ); console.log(cartItems); } else { console.log(items); setCartItems([...cartItems, { ...items, qty: 1 }]); } }; const onRemove = (product) => { const exist = cartItems.find((x) => x.id === product.id); if (exist.qty === 1) return; setCartItems( cartItems.map((x) => x.id === product.id ? { ...exist, qty: exist.qty - 1 } : x, ), ); }; const onDeleted = (product) => { if (window.confirm('Do you want to delete this product?')) { setCartItems(cartItems.filter((x) => x.id !== product.id)); } }; const itemPrice = cartItems && cartItems.reduce((a, c) => a + c.qty * c.price, 0); const delieveryPrice = '3000'; // eslint-disable-next-line const totalPrice = parseInt(itemPrice) + (itemPrice && parseInt(delieveryPrice)); return ( <AppContext.Provider value={{ cartItems, setCartItems, onAdd, onRemove, cart, onDeleted, itemPrice, totalPrice, delieveryPrice, }} > {props.children} </AppContext.Provider> ); }Puede lograr su objetivo creando un CustomHook para inicializar el estado con valor en localStorage y también escribir el estado en localStorage en cada actualización, así:
import * as React from 'react' function useLocalStorageState( key, defaultValue = '', {serialize = JSON.stringify, deserialize = JSON.parse} = {}, ) { const [state, setState] = React.useState(() => { const valueInLocalStorage = window.localStorage.getItem(key) if (valueInLocalStorage) { try { return deserialize(valueInLocalStorage) } catch (error) { window.localStorage.removeItem(key) } } return typeof defaultValue === 'function' ? defaultValue() : defaultValue }) const prevKeyRef = React.useRef(key) React.useEffect(() => { const prevKey = prevKeyRef.current if (prevKey !== key) { window.localStorage.removeItem(prevKey) } prevKeyRef.current = key window.localStorage.setItem(key, serialize(state)) }, [key, state, serialize]) return [state, setState] }y utilícelo en su componente de esta manera:
const [cartItems, setCartItems] = useLocalStorageState('cartItems',[]);You use can use localStorage.setItem().but since you have a list of items, you will first stringify it while saving and parsing when you fetch it back. import React, { createContext, useState } from 'react'; export const AppContext = createContext(); export function Context(props) { const [cartItems, setCartItems] = useState([]); const onAdd = (items) => { const tempItems = [...cartItems]; const exist = cartItems.findIndex((x) => x.id === items.id); console.log(exist); if (exist >= 0) { tempItems[exist].qty = tempItems[exist].qty + 1; } else { // setCartItems([...cartItems, { ...items, qty: 1 }]); tempItems.push(items) } setCartItems(tempItems) localStorage.setItem("cart" , JSON.stringify(tempItems)) }; //to fetch data const getCart = () => { const FetchedcartItems = localStorage.getItem("cart"); if (FetchedcartItems) { const parsedCartItems = JSON.parse(FetchedcartItems); console.log(parsedCartItems); setCartItems(parsedCartItems); } }; useEffect(() => { getCart(); }, []); return ( <AppContext.Provider value={{ cartItems, setCartItems, onAdd, onRemove, cart, onDeleted, itemPrice, totalPrice, delieveryPrice, }} > {props.children} </AppContext.Provider> ); }Lo que hago, por lo general, es configurar un archivo solo para manejar localStorage, en su caso, cart.services.js . Dentro de ese archivo puede crear funciones que reciban, guarden, lean, modifiquen, etc., el almacenamiento local.
Algo como esto:
const getCart = () => { return JSON.parse(localStorage.getItem("cart")); }; const setCart = (cart) => { localStorage.setItem("cart", JSON.stringify(cart)); }; const removeUser = () => { localStorage.removeItem("cart"); };Obviamente, es posible que necesite una lógica más sofisticada para agregar elementos en función del estado anterior, etc., pero la lógica básica es esa y es muy sencilla.
Más información: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage