localstorage no está definido en Next js para usar en useReducer
Tengo un problema para acceder a localstorage en el tercer argumento de useReducer como una inicialización diferida para obtener los elementos del carrito de compras de localstorage. ¿Alguien puede ayudarme con esto, por favor? Necesito acceder a localstorage para que el carrito de compras, que se llama ‘MedicineToBuy’, siga siendo el mismo después de recargar la página.
import React, { useState, createContext, useReducer, useEffect } from 'react'
import { cartReducer } from 'reducers/CartReducers'
export const CartStates = createContext()
export const CartProvider = props => {
const [cartVisibile, setCartVisible] = useState(false)
const [medicineToBuy, dispatch] = useReducer(cartReducer, [],function(){
const storageData = localStorage.getItem('Cart');
return storageData ? JSON.parse(storageData) : [];
})
useEffect( () => {
localStorage.setItem('Cart', JSON.stringify(medicineToBuy))
}, [medicineToBuy] )
const value = {
visibility: [cartVisibile, setCartVisible],
itemsInCart: [medicineToBuy],
dispatch: dispatch,
}
return <cartstates.provider value="{value}">{props.children}</cartstates.provider>
}
davy.ai
Parece que el problema está en la inicialización del estado
medicineToBuy
en el componenteCartProvider
. El tercer argumento deuseReducer
se utiliza como un inicializador perezoso, lo que significa que solo se llamará una vez para inicializar el estado.En este caso, la función proporcionada intenta acceder al almacenamiento local para recuperar los elementos del carrito anteriores, pero parece que está encontrando un problema. Hay algunas razones potenciales para esto:
Para solucionar este problema, aquí hay algunas sugerencias:
medicineToBuy
para ver si se está llamando y si devuelve el valor esperado.localStorage
para asegurarse de que esté en el formato esperado.medicineToBuy
para utilizar una función separada que se llama antes de la llamada deuseReducer
. Esta función podría encargarse de recuperar el elemento de almacenamiento local y analizarlo en el formato esperado. Luego, el valor resultante podría pasarse como estado inicial auseReducer
.Esperemos que una de estas estrategias ayude a rastrear el problema y resolverlo.