-2

Ola! estou fazendo um projeto para estudo de um ecommerce, estou utilizando NextJs e strapi para o CM. Estou com o seguinte problema, quando clico no meu botão para adicionar ao carrinho de compras, ele adiciona todos os produtos de uma vez só, quero que ele apenas adicione o item que eu clickei!

Estou usando o ContextApi para gerenciar os estado:

Porem continuo com o problema de estar adicionando todos no carrinho. Quando faço um console.log no meu state do cartItem, ele funciona como esperado, clico no primeiro item ele adiciona apenas ele mesmo, mas quando do um console.log no meu items la do component DropDown, no primeiro click ele faz um array com todos os "valores" que fiz um map. Isso que nao consigo entender por que esta acontecendo

Alterei como sugerido no comentário

  const addToCart = (id) => {
    const itemExiste = cartItem.find((itemId) => itemId === id)
    if (!itemExiste) {
      const newItems = [...cartItem, id]
      setCartItem(newItems)
    }
  }

Ai eu faço uma Query para poder pegar os dados da minha api do Strapi

filtrando pelo ID

 const { data } = useQuery(GET_IDS_CARDS, {
    skip: !cartItem.length,
    variables: {
      filters: {
        id: cartItem
      }
    }
  })

E aqui eu faço um map usando a minha query, para pegar os dados que preciso, no momento para testar só estou exibindo o valor

 <CartContext.Provider
      value={{
        items: data?.cards.data.map((item) => ({
          valor: item.attributes.valor,
          id: item.id,
          desc: item.attributes.description
        })),
        addToCart,
      }}
    >
      {children}
    </CartContext.Provider>

Para finalizar estou fazendo um map no componente que quero exibir o resultado

import React from 'react'
import { useCart } from '../../../hooks/use-cart'

const DropDown = () => {
  const { items } = useCart()
  console.log(items)
  return (
    <div>
      <h1>DropDown</h1>
      {items?.map((item) => (
        <div key={item.id}>{item.valor}</div>
      ))}
    </div>
  )
}

export default DropDown

O problema que ele me retorna o valor de todos os Cards que tem o botão do AddToCart.

alguém me salva por favor

1 Resposta 1

-2

A função addToCart esta adicionando todos os itens no carrinho sempre que é chamada.

Atualmente addToCart = (id) cria uma nova lista de itens a partir da lista atual.
Ou seja, cartItem é utilizada por causa da newItems.

const addToCart = (id) => {
  const newItems = [...cartItem, id]
  setCartItem(newItems)
}

O que tem que programar é uma verificação se o item já esta na lista antes de adicionar.

const addToCart = (id) => {
  const itemExiste = cartItem.find(itemId => itemId === id);
  if (!itemExiste) {
    const newItems = [...cartItem, id];
    setCartItem(newItems);
  }
};

Esse trecho verifica o item pelo ID e se já esta na lista do carrinho e caso já exista não faz nada, dessa forma adiciona apenas um item.

Pode ser feito pelo find ou usando o includes!

const addToCart = (id) => {
  if (!cartItem.includes(id)) {
    const newItems = [...cartItem, id];
    setCartItem(newItems);
  }
};

retornando true se o item já está no carrinho contrario não fara nada!
Até mesmo pelo indexOf dara para fazer

if (!cartItem.indexOf(id))

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .