Problemas com React - Error: Too many re-renders.

[francysreymer]

Pessoal, estou fazendo um projeto no React e estou tendo um problema quando eu chamo um componente filho dentro do componente Pai. O erro é o seguinte: Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

Meu componente filho que chamo dentro do componente pai é o :

   <FormCompany 
      modal={open}
    />

Esse modal é uma prop que eu utilizo dentro do componente filho para abrir um modal.
No componente filho (FormCompany) tenho o seguinte código:

const [open, setOpen] = useState(false);
setOpen(props.modal);
<Modal
aria-labelledby="transition-modal-title"
aria-describedby="transition-modal-description"
className={classes.modal}
open={open}
onClose={handleClose}
closeAfterTransition
BackdropComponent={Backdrop}
BackdropProps={{
timeout: 500,
}}
/>

[ninetails]

Atente a linha:

setOpen(props.modal);

Teu componente em todo render, vai executar ele, que consequentemente irá sinalizar que o componente alterou o estado do useState acima e irá triggar uma nova renderização.

Tente algo como:

const [open, setOpen] = useState(props.modal);

pra pegar inicialmente se está aberto ou fechado. E use o setOpen somente dentro de ações como cliques ou tomando cuidado para não ser chamado em todo render.

[francysreymer]

@ninetails mais uma duvida. No meu componente pai eu mando a props.modal para fazer para o componente filho abrir o dialog. Porém, para fechar é o componente filho que o faz através do state open. Mas aí está o problema, prq sempre estará setado a prop no pai como true, ou seja, mesmo se eu fechar no filho eu não vou conseguir abrir de novo.

O que vc sugere? Eu estava pensando em fazer uma função de callback que retorna o open para o pai, o que acha?

[CarlosZiegler]

Eu passo a funcao pai para o filho executar, assim vc cria no pai a funcao e executa no filho. Componente pai :const handleClose = ()=> setOpen(false) Componente filho <input type={"button"} onclick={()=> modal.onClose()}/> algo assim...

[ninetails]

@francysreymer sim, creio que seria uma boa. Tipo, deixa o controle de estado com o pai somente e vc passa uma callback pro filho :D

[francysreymer]

Pessoal consegui resolver, muito obrigado pela ajuda.

…

--- Francys Reymer Engenheiro de Computação | Mestre em Engenharia Elétrica Fone/Whatsapp: (67) 98429-5618

On Mon, Dec 28, 2020 at 1:14 PM Carlos Kazuo ***@***.***> wrote: @francysreymer <https://github.com/francysreymer> sim, creio que seria uma boa. Tipo, deixa o controle de estado com o pai somente e vc passa uma callback pro filho :D — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1958 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AKKL3XGL2O2J3FAOINIOQALSXC4H5ANCNFSM4VGKIXHQ> .