Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Bug] Quando eu clico em adicionar ao carrinho ele salva 3 itens

Quando eu abro a aplicação (ou recarrego), o carrinho está vazio, mas quando eu clico no botão "Adicionar ao carrinho", ele está adicionando no carrinho 3 itens de cada produto que eu clico (clico apenas 1 vez e mesmo assim ele adiciona 3).

Insira aqui a descrição dessa imagem para ajudar na acessibilidade Antes de clicar em um produto

Insira aqui a descrição dessa imagem para ajudar na acessibilidade Depois de clicar uma única vez

Não sei porque isso tá acontecendo, vou deixar aqui o link pro meu código no GitHub:

https://github.com/MilyRibeiro/meteora-e-commerce 
2 respostas
solução!

Oi Mylena, tudo bem?

Sinto muito pela demora em obter um retorno.

Testei o seu código e por aqui nenhum produto foi adicionado ao carrinho. Acredito que isso esteja acontecendo pois o componente Produtos (index.jsx) não foi configurado corretamente com as funções para manipular os produtos, bem como não está recebendo o setCarrinho vindo do contexto CarrinhoContext, fazendo com que não seja possível manipulá-lo.

Para corrigir, você deve ir até components > Produtos > index.js e adicionar o contexto e as funções de manipular produtos. O código desse arquivo deve ficar assim:

import React, { useContext } from "react";
import Produto from "./Produto";
import produtos from "@/mocks/produtos.json";
import Titulo from "@/components/Titulo";
import { CarrinhoContext } from "@/context/CarrinhoContext";

const Produtos = () => {
  const { carrinho, setCarrinho } = useContext(CarrinhoContext);

  function adicionarProduto(novoProduto) {
    const temOProduto = carrinho.some((itemDoCarrinho) => {
      itemDoCarrinho.id === novoProduto.id;
    });

    if (!temOProduto) {
      novoProduto.quantidade = 1;
      return setCarrinho((carrinhoAnterior) => [
        ...carrinhoAnterior,
        novoProduto,
      ]);
    }

    setCarrinho((carrinhoAnterior) =>
      carrinhoAnterior.map((itemDoCarrinho) => {
        if (itemDoCarrinho.id === novoProduto.id)
          itemDoCarrinho.quantidade += 1;
        return itemDoCarrinho;
      })
    );
  }

  return (
    <section role="produtos" aria-label="Produtos que estão bombando!">
      <Titulo>Produtos que estão bombando!</Titulo>
      <div className="container row mx-auto">
        {produtos.map((produto) => (
          <Produto
            key={produto.id}
            {...produto}
            adicionarProduto={adicionarProduto}
          />
        ))}
      </div>
    </section>
  );
};

export default Produtos;

Feito isso, já é possível adicionar um produto ao carrinho.

Espero ter ajudado. Conte com o apoio do fórum!

Abraços e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓

Oie, obrigada pelo retorno e pela ajuda com a resolução do problema! Ajudou sim, muito obrigada!