es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Problemas con el estado de React y el carrito de compras.

19 Jul, 2023 Programación

He definido un contexto react para un carrito de compras al cual quiero tener acceso en cada componente hijo. También he definido algunos métodos (añadir y eliminar del carrito de compras). No puedo hacer que la función addToCart funcione:

import React, { useContext, useState } from "react";

const ShoppingCartContext = React.createContext();

export function useShoppingCart() {
    return useContext(ShoppingCartContext);
}

export function ShoppingCartProvider({ children }) {
    const [shoppingCart, setShoppingCart] = useState([]);

    function addToCart(item) {
        setShoppingCart(shoppingCart.concat(item));
    }

    function removeFromCart(item) {
        const index = shoppingCart.indexOf(item);
        setShoppingCart(shoppingCart.splice(index, 1));
    }

    const value = { shoppingCart, setShoppingCart, addToCart, removeFromCart };

    return (
        <shoppingcartcontext.provider value="{value}">
            {children}
        </shoppingcartcontext.provider>
    );
}

En el archivo en el que quiero acceder al carrito de compras, estoy haciendo esto:

const { shoppingCart, setShoppingCart, addToCart, removeFromCart } = useShoppingCart();

Luego, en un useEffect(), estoy haciendo esto:

addToCart(["item"])
console.log(shoppingCart)

Pero muestra por consola un array vacío.

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El problema con la función addToCart que no funciona podría ser porque se llama dentro de un useEffect, que solo se activa después de que el componente se haya renderizado. Como resultado, la variable de estado del carrito de compras aún no está establecida cuando se llama a addToCart.

    Para solucionar esto, puedes intentar agregar un botón u otra interacción del usuario que active la función addToCart, en lugar de depender de useEffect.

    Alternativamente, también puedes intentar usar useRef en lugar de useState para la variable del carrito de compras, lo que te permitirá modificarla sin activar un nuevo renderizado. Aquí tienes un ejemplo:

    import React, { useContext, useRef } from "react";

const ShoppingCartContext = React.createContext();

export function useShoppingCart() {
  return useContext(ShoppingCartContext);
}

export function ShoppingCartProvider({ children }) {
  const shoppingCartRef = useRef([]);

  function addToCart(item) {
    shoppingCartRef.current = shoppingCartRef.current.concat(item);
  }

  function removeFromCart(item) {
    const index = shoppingCartRef.current.indexOf(item);
    shoppingCartRef.current.splice(index, 1);
  }

  const value = { shoppingCart: shoppingCartRef.current, addToCart, removeFromCart };

  return (
    <shoppingcartcontext.provider value="{value}">
      {children}
    </shoppingcartcontext.provider>
  );
}

    Y en el archivo donde quieres acceder al carrito de compras:

    const { shoppingCart, addToCart, removeFromCart } = useShoppingCart();

// llamar a addToCart al hacer clic en un botón u otra interacción del usuario
<button onclick="{()" ==""> addToCart(["item"])}>Agregar al carrito</button>

// mostrar en la consola el carrito de compras
console.log(shoppingCart)

    Esto te permitirá acceder y modificar la variable de estado del carrito de compras desde cualquier componente hijo.

Comments are closed.