1

Estoy intentando guardar los productos de mi carrito con un context, pero cada vez que le doy al boton de agregar me tira el siguiente error:

TypeError: addItem is not a function

El codigo es el siguiente

 import React, { useContext, useState, createContext } from "react";
    
    const CartContext = createContext();
    
    const useCartContext = () => useContext(CartContext);
    
    export const CartProvider = ({ children }) => {
      const [productos, setProductos] = useState([]);
    
      const addItem = ({
        title,
        volumes,
        start_date,
        end_date,
        image_url,
        score,
        mal_id,
      }) => {
        setProductos([
          ...productos,
          { title, volumes, start_date, end_date, image_url, score, mal_id },
        ]);
      };
    
      return (
        <CartContext.Provider value={{ addItem }}>{children}</CartContext.Provider>
      );
    };
    export default useCartContext;



    const ItemDetailContainer = () => {
      const [mangasId, setMangas] = useState([]);
    
      //Context
      const { productos, addItem } = useCartContext;
    
      const { id } = useParams();
    
      function onAdd(cantidad) {
        addItem({
          title: mangasId.title,
        });
      }
    
 

Desde ya muchas gracias!

2
  • Hay que verificar si CartProvider esta envolviendo a la app. saludos
    – g.4
    Commented el 4 nov. 2021 a las 1:54
  • 1
    @g.4 si, lo tengo en el app <CartProvider> mis rutas </CartProvider> i.imgur.com/3vGw5xC.png
    – Kyfax Kun
    Commented el 5 nov. 2021 a las 4:07

1 respuesta 1

2

Ya se confirmó que el provider CartProvider esta envolviendo a la app, también se asume que se esta importando el método del contexto useCartContext.

Se pueden ver dos detalles, los cuales probablemente esten causando el problema que describes.

Invocar a useCartContext

Aquí, se debe invocar a useCartContext:

 //Context
      const { productos, addItem } = useCartContext;

Es decir, así:

//Context
      const { productos, addItem } = useCartContext();

Verificar los valores que proporciona el contexto

En el código se destructuran 2 valores:

const { productos, addItem } = useCartContext();

Pero productos no parece estar listado en los valores del context:

return (
        <CartContext.Provider value={{ addItem }}>{children}</CartContext.Provider>
      );

En este caso addItem quedó destructurada, pero en la variable productos(la destructuración se basa en indices ); por lo tanto, al tratar de invocar a addItem, también se tendrá el mensaje de error:

TypeError: addItem is not a function

Pues no hay nada en la segunda posición de la destructuración. Debería quedar así:

const {addItem } = useCartContext();

Ahora bien, si se necesita pasar productos desde el contexto, se debe listar en los valores de provider:

 <CartContext.Provider value={{ productos, addItem }}>{children}</CartContext.Provider>

Espero que esta respuesta sea de ayuda.

1
  • 1
    era eso muchas gracias!
    – Kyfax Kun
    Commented el 5 nov. 2021 a las 21:52

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.