Quiero poder almacenar elementos seleccionados de mi página de inicio en Almacenamiento local, ya que estoy usando useStateValue() .
Los elementos se muestran en la página de pago correctamente, sin embargo, al actualizar, la página de pago se vacía y vuelve a cero. El siguiente código funciona bien con useState normal. No sé lo que me estoy perdiendo cuando uso useStateValue() .
Mi código:
import React from "react";
import "./Checkout.css";
import CheckoutProduct from "./CheckoutProduct";
import { useStateValue } from "./StateProvider";
import Subtotal from "./Subtotal";
function Checkout() {
const [{ basket, user }, dispatch] = useStateValue();
React.useEffect(() => {
const data = localStorage.getItem("my-cart-list");
if (data) {
dispatch(JSON.parse(data))
}
}, []);
React.useEffect(() => {
localStorage.setItem("my-cart-list", JSON.stringify(basket))
});
Olvidaste la matriz de dependencias, lo que significa que se llamará a setItem en cada procesamiento:
React.useEffect(() => {
localStorage.setItem("my-cart-list", JSON.stringify(basket))
});
Si desea llamar a setItem cuando cambia la "canasta", debe usar:
React.useEffect(() => {
localStorage.setItem("my-cart-list", JSON.stringify(basket))
}, [basket]);