-2

Eu quero atualizar o meu objeto através de uma função de incremento e fazer com que apareça em tela. Eu consegui atualizar o objeto, porém, ele só atualiza no meu consolo.log, na parte visual da aplicação não está aparecendo. Como faço para que atualize no HTML também?

Estou utilizando ReactJS com Styled-Components

const [ coffeeList, setCoffeeList ] = useState<CoffeeType[]>([
{
  id: 1,
  img_item: expresso,
  type: ['TRADICIONAL'],
  title: 'Expresso Tradicional',
  description: 'O tradicional café feito com água quente e grãos moídos',
  quantity: 0,
  price: 9.99,
},
{
  id: 2,
  img_item: Americano,
  type: ['TRADICIONAL'],
  title: 'Expresso Americano',
  description: 'Expresso diluído, menos intenso que o tradicional',
  quantity: 0,
  price: 9.99,
},)

function handleIncrementItem(id: number) {
coffeeList.map(coffee => {
  if(coffee.id === id) {
    return {...coffee, quantity: coffee.quantity += 1}
  } else {
    return coffee
  }
})  

}

{coffeeList.map((coffee) => {
        return (
          <CoffeeItem key={coffee.id}>
            <img src={coffee.img_item} alt="Imagem de café" />
            <strong> {coffee.title} </strong>
            <Subtitle>
              {coffee.type.map((item) => {
                return <b key={Math.random()}> {item} </b>
              })}
            </Subtitle>

            <p> {coffee.description} </p>
            <div>
              <span> {coffee.price} </span>
              <ContdownOfItems>
                <button type="button" onClick={() => handleIncrementItem(coffee.id)}>
                  <Minus size={24}/> 
                </button>
                {coffee.quantity}
                <button type="button">
                  <Plus size={24}/>
                </button>
              </ContdownOfItems>
              <button type="submit">
                <ShoppingCart weight="fill" size={24} />{' '}
              </button>
            </div>
          </CoffeeItem> 
        )
      })}

1 Resposta 1

-2

Aparentemente não está adicionando no seu State o novo objeto, tente fazer desta forma:

function handleIncrementItem(coffe:CoffeeType) {
  coffe.quantity += 1; //ou coffe.quantity = coffe.quantity + 1;

 //Agora vamos filtrar um novo array sem o objeto que estamos modificando, para posteriormente adicionar ele novamente com novo valor.

  let coffeFiltro = coffeeList.filter(e:CoffeeType => e.id !== coffe.id );

 //Agora vamos copiar e adicionar o novo 

  setCoffeeList([...coffeeFiltro, coffe ]);
 
}  

No button modifique assim:

 <button type="button" onClick={() => handleIncrementItem(coffee)}>

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 .