Estoy creando un carrito de compras con NextJS y funciona, pero cuando intento registrar en la consola la longitud de mi carrito, en el primer renderizado aparece vacío, por lo que me da muchos problemas.
const initialState = {};
const [cart, setCart] = useState(initialState);
useEffect(() => {
const cartData = JSON.parse(localStorage.getItem("cart"));
if (cartData) {
setCart(cartData);
}
}, []);
useEffect(() => {
localStorage.setItem("cart", JSON.stringify(cart));
}, [cart]);
Todos los métodos de carrito como DeleteCart, AddToCart, etc. funcionan bien. ¿Alguna idea?
Estás 'casi' haciendo un bucle de estos dos useEffect . Prueba esto:
const initialState = {};
const [cart, setCart] = useState(initialState);
useEffect(() => {
const cartData = JSON.parse(localStorage.getItem("cart"));
if (cartData) {
setCart(cartData);
}
}, []);
useEffect(() => {
if(Object.keys(cart).length > 0){
localStorage.setItem("cart", JSON.stringify(cart));
{
}, [cart]);