CSS Menu não abre com o useState react

[WilliamNascimento]

Eu tenho um menu hamburguer onde clico e alera o state , confirmei no log tudo ok .

porém na hora de por a classe certa ele não altera , mas se eu alterar o estado do state ele some caso true e aparece caso false

 

const {aberto ,setOpen,abrir} = useHamburguer() // destruturando o que quero do meu hook

// esse e o container que aparece e some

<div className = {aberto ? style.containerInfo : style.containerInfoOff}>
        <div className = {style.infos}>
           <BarraPesquisa/>
           <UserHeader value = {logado}/>
        </div>
</div>


hook personalizado 

import React from 'react'

const useHamburguer = () => {
    let [aberto , setOpen] = React.useState(true);

   

    function abrir (){
        setOpen(!aberto)
        console.log(aberto)
    }



    return{
       aberto,
       setOpen,
       abrir,
    }
}

export default useHamburguer

 

[Rui Guilherme]

Não é ideal usar "let", altere para "const"

Em 29/06/2021 às 16:13, WilliamNascimento disse:

    let [aberto , setOpen] = React.useState(true);

Caso queira mais detalhes: https://github.com/facebook/react/issues/13982#issuecomment-433349510

Caso queria ler o Pull Request da issue react#13982: https://github.com/expo/expo/pull/7761

 

Esse bug está acontecendo porque o scopo está voltando ao normal e o React está renderizando do zero, não sei como está toda a sua chamada, mas simulei seu código e funcionou perfeitamente: https://codesandbox.io/s/romantic-smoke-joet0?file=/src/App.js

 

Caso tenha problemas em ver o código em execução: https://joet0.csb.app/

 

Provavelmente você deve estar usando renderização por servidor o que pode estar causando esse bug, acredito que a melhor solução seja definir o:

  function abrir() {
    setOpen(!aberto);
  }

no mesmo escopo do hamburgue dai você não deve perder o state do "open/setOpen"

 

Outra solução mais completa e profissional seria usar o Redux, dai você vai eliminar TODOS OS PROBLEMAS de states entre componentes e hooks.