[Projeto] Minha solução - função remover produto

Olá! Parece que você fez um ótimo trabalho na função removerProduto. A lógica que você implementou está correta e segue as instruções do exercício.

No entanto, notei um pequeno problema em seu código. Você está tentando reatribuir um valor a carrinhoMod que é uma constante. Em JavaScript, constantes não podem ter seus valores reatribuídos.

Para corrigir isso, você pode fazer a reatribuição diretamente na chamada do método filter, assim:

  function removerProduto(id) {
    let carrinhoMod = [...carrinho]
    const indProduto = carrinhoMod.findIndex(item => item.id === id)
    const produto = carrinhoMod[indProduto]
    
    if (produto.quantidade > 1) {
      produto.quantidade-- 
    } else {
      carrinhoMod = carrinhoMod.filter(item => item.id !== produto.id)
    }
    
    setCarrinho(carrinhoMod)
  }

Note que mudei carrinhoMod para ser uma variável let em vez de const, para permitir a reatribuição. Ou você pode criar uma nova variável para isso, é até mais seguro e deixa seu código mais claro. No mais, é isso!

Espero ter ajudado e bons estudos!

Professor, gostei bastante da lógica implementada pelo estudante, porém tenho uma dúvida...

Não seria uma boa prática, quando trabalhamos com React, usar a função de atualização do estado que aceita uma função como argumento (setCarrinho)? Pra garantir que estamos trabalhando com o estado mais atual do carrinho possível.

Minha alteração no código seria assim:

function removerProduto(id) {
  setCarrinho((carrinhoAnterior) => {
    const carrinhoMod = [...carrinhoAnterior];
    const produtoIndex = carrinhoMod.findIndex((item) => item.id === id);

    if (produtoIndex !== -1) {
      const produto = carrinhoMod[produtoIndex];

      if (produto.quantidade > 1) {
        produto.quantidade--;
      } else {
        carrinhoMod.splice(produtoIndex, 1);
      }
    }

    return carrinhoMod;
  });
}

Isso se faz realmente necessário ou não? Essa é a minha dúvida.

Fala, Leandro! Tudo jóia?

Essa é uma boa prática sim, trabalhar com o estado mais atual do carrinho passando uma função de callback para o setCarrinho. Isso garante que você possa estar sempre trabalhando com o estado mais atual do carrinho. Um bom exemplo disso é quando diferentes partes do código alteram o mesmo estado, gerando um problema de concorrência e você acabar com um estado desatualizado. Nesses casos é bom usar o estado anterior por meio de uma função de callback dentro do setState.

Porém, dependendo do caso é também uma boa prática você considerar essa abordagem. Por exemplo:

• Vai adicionar complexidade desnecessária no seu código?

  • Em casos simples, onde não há muita concorrência ou atualizações frequentes do estado, o uso da função de callback pode adicionar complexidade ao código sem trazer benefícios perceptíveis.

• Seu código será legível e fácil de interpretar?

  • Em algumas situações, o código com a função de callback pode ser menos legível para desenvolvedores menos familiarizados com esse padrão de atualização de estado.

E vários outros. Então é sempre bom refletir se vale a pena o uso ou não.

Espero ter esclarecido suas dúvidas.

Bons estudos!

Obrigado pelos apontamentos professor,

Depois de postar a resposta, fiz algumas alterações a agora está assim, mais simples:

    function removerProduto(id) {
        let carrinhoMod = [...carrinho]
        let produto = carrinho.find(item => item.id === id)

        if (produto.quantidade > 1) {
            carrinhoMod = mudarQuantidade(id, -1)
        } else {
            carrinhoMod = carrinhoMod.filter(item => item.id !== produto.id)
        }

        setCarrinho(carrinhoMod)
    }

Nesse caso, estou usando a função mudarQuantidade, que foi desenvolvida no vídeo seguinte.