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