1

Possuo um componente que preciso controlar quando o modal vai abrir/fechar, onde o componente pai é o componente que vai abrir o modal e o componente filho (que é o modal) vai fechar.

No meu componente pai, criei uma variável pra controlar quando vai abrir/fechar o modal:

const [openFullScreenModal, setOpenFullScreenModal] = useState(false)

No meu template do componente pai possuo um botão que altera o valor dessa variável para abrir o modal:

<button onClick={() => setOpenFullScreenModal(true)}>Abre modal</button>

e por fim, possui o componente modal:

<ModalFullScreen
   title="Permissões do grupo"
   onCloseModal={setOpenFullScreenModal()}
   open={openFullScreenModal}
/>

No meu componente filho estou passando a propriedade open com o valor da variável do componente pai e a propriedade onCloseModal que ao fechar o componente filho (modal) deve alterar a variável openFullScreenModal do componente pai para false.

No meu componente filho, recebo o valor de open através da props e também possuo uma função para passar para o componente pai o valor false ao clicar no botão fechar do meu modal:

 const ModalFullScreen = (props) => {

    const { title, FormComponent, open } = props
    const handleClose = () => {
       this.props.onCloseModal(false)
    }

No template do meu modal, eu utilizo a propriedade open para definir quando for aberta e ao fechar, uso a função handleClose para passar para o componente pai o valor false para fechar o modal:

<Dialog fullScreen open={open} onClose={handleClose}>

Quando acesso o componente pai que possui o botão para abrir o modal, eu recebo diversos erros vindos do componente ModalFullScreen:

Too many re-renders. React limits the number of renders to prevent an infinite loop.

Como posso fazer pra corrigir este problema?

1 Resposta 1

2

Tenta substituir esse trecho

<ModalFullScreen
   title="Permissões do grupo"
   onCloseModal={setOpenFullScreenModal()}
   open={openFullScreenModal}
/>

por

<ModalFullScreen
   title="Permissões do grupo"
   onCloseModal={setOpenFullScreenModal}
   open={openFullScreenModal}
/>

Perceba que na segunda forma estamos fornecendo a referência da função para que quando o seu componente filho executar a chamada this.props.onCloseModal(false) você esteja na verdade executando a referência da função pai (que na verdade é setOpenFullScreenModal).

O que provavelmente está ocorrendo é que o seu componente pai executa indefinidas vezes a função setOpenFullScreenModal() quando declarada dessa forma em seu componente filho.

Na documentação oficial do React existe um trecho que explica como realizar um bind de uma função para um componente

Espero ter lhe ajudado

1
  • Tinha feito algo parecido e funcionou, tentei com seu código e também funcionou, só tive que alterar o this.props.onCloseModal(false) para const { onCloseModal } = props e na função handleClose chamei o onCloseModal(false). Obrigado. Commented 8/04/2020 às 22:47

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 .