Entrar Ainda não tem acesso?
2
respostas

[Bug] Loop Infinito ao Avançar Páginas em Formulário de Cadastro com Paginação em JavaScript

por Matheus Pereira Torres
| 152.8k xp | 4 posts

Estou criando um formulário de cadastro com paginação utilizando JavaScript puro. Quando avanço para a segunda página, retorno para a primeira e avanço novamente para a segunda, o formulário carrega e avança inesperadamente para a terceira página, ficando em um loop eterno no event listener submit, que acredito ser a razão devido ao que vi usando breakpoints. Já tentei remover o listener, mas não resolveu o problema, alguém pode me ajudar a encontrar a razão desse comportamento?

Parte do codigo em questao que esta em loop:

if (formularioListener) {
    formulario.removeEventListener('submit', formularioListener);

}

    formularioListener = (dados) => { 
        salvarDados(dados, estadoFormulario);
        if(estadoFormulario.paginaAtual >= 3){
            return
        }else{
            estadoFormulario.paginaAtual += 1;
        }
        exibirFormulario(estadoFormulario);
        recuperarInfo(estadoFormulario);
    };
    
    formulario.addEventListener('submit', formularioListener);

Observações:

  • Estou salvando os dados no localStorage e atualizarei isso assim que aprender a lidar com bancos de dados.
  • Essa é uma página SPA (Single Page Application), estou fazendo toda a renderização de novos conteúdos pelo JavaScript puro, sem uso de bibliotecas.

Agradeço antecipadamente pela ajuda!

2 respostas
por Victor Costa Santos
| 1921.9k xp | 3688 posts
Alura Scuba Team Monitor de ForumOps

Olá Matheus!

Infelizmente eu não consigo testar de fato o seu código, mas uma possível solução comum para esse tipo de problema é prevenir o comportamento padrão do evento 'submit' usando event.preventDefault().

Tente algo assim:

if (formularioListener) {
    formulario.removeEventListener('submit', formularioListener);
}

formularioListener = (event) => { 
    event.preventDefault();  // Previne o comportamento padrão do submit

    salvarDados(event, estadoFormulario);

    if (estadoFormulario.paginaAtual >= 3) {
        return;
    } else {
        estadoFormulario.paginaAtual += 1;
    }

    exibirFormulario(estadoFormulario);
    recuperarInfo(estadoFormulario);
};

formulario.addEventListener('submit', formularioListener);

Mas esta é apenas uma ideia genérica, que pode ou não funcionar. Para que eu possa ajudá-lo de forma mais assertiva, por gentileza, compartilhe mais detalhes sobre o seu projeto. Assim poderei testar o comportamento que está ocorrendo de fato, e testa outras soluções. Ficarei feliz em ajudar.

Reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso ✨

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!
por Matheus Pereira Torres
| 152.8k xp | 4 posts

Olá Victor, Obrigado pelo reply, quanto ao event.preventDefault(), eu estou fazendo isso dentro do salvar dados.

Vou disponibilizar o GIT, ele esta em um repositorio publico e tambem esta upado na Vercel, seguem os links abaixo:

O codigo segue o fluxo normal quanto ao avanço direto, o erro surge quando retorno para a tela inicial para corrigir alguns erros e volto para onde estava, esse erro surgiu assim que adicionei a terceira tela.

Tambem tive problema com o HTMLOptionsCollection na hora de comparar e exibir os dados previamente usados no select, minha ideia inicial era usar a função recuperarInfo() tambem com os selects, e não somente os inputs, porem só consigo recuperar as options quando elas são criadas diretamente no cadastroDinamico.js.

Eu acabei fazendo uma gambiarra depois para recuperar os dados, mas gostaria de saber se tem alguma forma de fazer o HTMLOptionsCollection funcionar nesse caso.

obs: consigo recuperar os options pelo console.log no navegador, então acredito que seja relacionado ao tempo de carregamento.

No geral esses foram os problemas que tive com meu codigo, se puder me ajudar ficarei extremamente grato, estou a um tempo quebrando a cabeça e tentando entender a razão desses problemas.

Desde ja agradeço :)