Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

erros.errors.length não retorna tamanho do array

Referente ao curso React parte 1: componentes reutilizáveis para sua webapp, no capítulo Isolando os componentes do Autor e melhorando a comunicação entre eles e atividade Validação Parte 1

por Joaquim Silveira Mello Filho
| 97.8k xp | 67 posts
tentando ser full stack

O conteúdo do objeto literal que que é retornado quando tentamos realizar um cadastro com dados inválidos é montado no backend?

O backend que estou utilizando retorna o seguinte erro:

* {errors: {…}, _message: "Autore validation failed", message: "Autore validation failed: senha: Path `senha` is r…ail` is required., nome: Path `nome` is required.", name: "ValidationError"}
    * errors:
     * email: {message: "Path `email` is required.", name: "ValidatorError", properties: {…}, kind: "required", path: "email", …}
     * nome: {message: "Path `nome` is required.", name: "ValidatorError", properties: {…}, kind: "required", path: "nome", …}
     * senha: {message: "Path `senha` is required.", name: "ValidatorError", properties: {…}, kind: "required", path: "senha", …}
     * __proto__: Object
     message: "Autore validation failed: senha: Path `senha` is required., email: Path `email` is required., nome: Path `nome` is required."
     name: "ValidationError"
     _message: "Autore validation failed"
     * __proto__: Object

Parece que a propriedade errors do erro retornado pelo meu backend não é um array, pois quando coloquei um console.log(erros.errors.length) antes do for do TratadorErros.js ele imprimiu undefined e, provavelmente por isso, não está entrando dentro do for.

Como faço para verificar, na estrutura acima, que a propriedade errors possui 3 erros?

Código do TratadorErros.js:

import PubSub from 'pubsub-js';

export default class TratadorErros {
    publicaErros(erros){
        console.log(erros)
        console.log(erros.errors.length)
        for(var i=0;i<erros.errors.length;i++){
            console.log("tratando erros dentro do for")
            var erro = erros.errors[i];
            PubSub.publish("erro-validacao",erro);
        }
    }
}
4 respostas
solução!
por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Fala aí Joaquim, tudo bem? Realmente, o valor da propriedade errors não é um Array e sim outro objeto.

Se você quiser interar sobre todos os valores, vai precisar mudar um pouco, pode utilizar o Object.values:

Object.values(erros.errors).forEach(erro => {
    console.log("tratando erros dentro do for")
    PubSub.publish("erro-validacao",erro)
})

Espero ter ajudado.

por Joaquim Silveira Mello Filho
| 97.8k xp | 67 posts
tentando ser full stack

Valeu Matheus!

Com o forEach consegui interar sobre os erros retornados, porém notei que as propriedades do erro retornado pelo meu backend também são diferentes das propriedades do erro retornado pelo backend utilizado no curso.

Exemplo:

No componentDidMount do InputCustomizado.js utilizado na aula 5, é verificado se erro.field é igual ao this.props.name e depois é atribuído o erro.defaultMessage á mensagem de erro que será mostrada na tela:

    componentDidMount() {
        PubSub.subscribe("erro-validacao",function(topico,erro){            
            if(erro.field === this.props.name){
                this.setState({msgErro:erro.defaultMessage});            
            }
        }.bind(this));

        PubSub.subscribe("limpa-erros",function(topico){                        
            this.setState({msgErro:''});                        
        }.bind(this));        
    }
}

Como no erro retornado pelo meu backend não tem essas propriedades (field e defaultMessage), substituí as mesmas pelas as propriedades equivalente no erro retornado pelo meu backend (path e message):

 componentDidMount() {
        PubSub.subscribe("erro-validacao",function(topico,erro){            
            if(erro.path === this.props.name){
                this.setState({msgErro:erro.message});            
            }
        }.bind(this));

        PubSub.subscribe("limpa-erros",function(topico){                        
            this.setState({msgErro:''});                        
        }.bind(this));

Depois de alterado o for para forEach* e as propriedades "field" e "defaultMessage" por "path" e "message", as mensagens de erros foram mostradas nos span ao lado de cada input conforme esperado nesta aula.

por Joaquim Silveira Mello Filho
| 97.8k xp | 67 posts
tentando ser full stack

Reparei que tanto as mensagens de erros retornadas pelo backend utilizado no curso, quanto as retornadas pelo meu backend estão em inglês.

No meu caso, a mensagem do erro é exatamente a message que o mongoose retorna quando a requisição não atende ao que foi definido no modelo (nome, e-mail e senha definidos como obrigatório - required: true).

Pensando nisso, o ideal não seria o backend validar a requisição e caso ela não atenda as regras, retornar um erro "personalizado" (em português por exemplo).

por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Fala aí Joaquim, tudo bem? Fico feliz que tenha conseguido resolver o problema.

Você consegue alterar a mensagem de validação direto no Schema do Mongoose:

telefone: {
    required: [true, 'MENSAGEM PERSONALIZADA']
}

Espero ter ajudado.