M4#A107 - Regras para seleção de sabores

[angelilton]

fala daciuk, eu de novo 😅 seguinte eu não entendi muito bem o porque de passar 2 funções aqui, seria apenas para conseguir os valores do checkboxes? teria outro meio de fazer isso, talvez com algum hook?

const handleChangeCheckbox = (pizzaId) => (e) => {
    setCheckboxes((checkboxes) => {
      return {
        ...checkboxes,
        [pizzaId]: !checkboxes[pizzaId]
      }
    })
  }

@fdaciuk

[fdaciuk]

Oi @angelilton! Você precisa de uma closure pra conseguir ter acesso ao ID da pizza, já que você passa essa função para um evento já executando ela para ter acesso ao pizzaId, mas o evento também espera que uma função seja passada.

Então as soluções são:

1. uma Higher Order Function (função que retorna uma função), fazendo uma closure para guardar o valor de pizzaId ou
2. passar uma função anônima para o evento, e executar a função handleChangeCheckbox dentro dessa função anônima.

No caso de fazer da segunda forma, a função anônima é que vai receber o objeto de evento, já que é ela que vai ser passada como listener desse evento :)

Particularmente prefiro usar a HOF, mas das duas formas funcionam :)

[angelilton]

entendi essa parte, porém eu estou tento esse problema aqui -> https://share.getcloudapp.com/xQuYjRPA do componente renderizar 2 vezes toda vez que eu dou um click. ( meu código https://github.com/angelilton/order-pizza-reactJS/blob/main/src/pages/choose-pizza-flavours/choose-pizza-flavours.js )

mesmo eu seguindo para a proxima aula, quando eu dou um console.log('checkboxes:', checkboxes), ele me retorna o valor antigo do array. o erro --> https://share.getcloudapp.com/X6u0bKEm

[fdaciuk]

O log duplicado é por causa do StrictMode. Eu mostrei isso em algumas aulas mais pra frente. Pode ignorar, sempre vai logar duas vezes mesmo :)

Isso é algo que o time do React deve mudar em breve, pra não acontecer mais, mas é normal :)

Sobre estar mostrando o valor antigo, depende de onde você está colocando o console.log. Pra ver um valor atualizado de um estado criado com hooks, você precisa colocar o console.log logo abaixo da definição do hooks. Exemplo:

const [state, setState] = useState({})
console.log(state) // aqui vai mostrar sempre o valor atualizado

[angelilton]

Obrigado 👍🏾