Olá! Após fazer as alterações conforme a aula o Toast não exibe as mensagens de erro. Ao invés na mensagem é exibido undefined
Alguém poderia me dar um apoio? Meu código esta aqui https://github.com/candinhojr/learn-react
Obrigado!
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Olá! Após fazer as alterações conforme a aula o Toast não exibe as mensagens de erro. Ao invés na mensagem é exibido undefined
Alguém poderia me dar um apoio? Meu código esta aqui https://github.com/candinhojr/learn-react
Obrigado!
Olá Candinho, tudo bem com você?
Peço perdão pela demora em te responder, mas dando uma analisada no seu projeto foi um erro bem simples, veja:
Quando você criou o validador de formulário, foi dessa maneira:
validacao[regra.campo] = {
isInvalid: true,
message: regra.mensagem
}Ou seja, cada campo tem 2 atributos: isInvalid e message, entretanto na hora de fazer o reduce, você fez da seguinte maneira:
(erros, campo) => erros + campo.mensagem + '. ',Porém, não há esse atributo mensagem (por isso o undefined), modificando para message, da seguinte maneira:
(erros, campo) => erros + campo.message + '. ',Já irá funcionar corretamente!
Uma dica que pode te auxiliar com esses erros é substituir momentaneamente o reduce em uma linha, por um em bloco e testar as variáveis, por exemplo:
const erros = camposInvalidos.reduce(
(erros, campo) => {
console.log(erros);
console.log(campo);
erros + campo.message + '. '
},
''
)AI podemos ter um feedback de se o nome das propriedades estão corretos, por exemplo:
Object { isInvalid: true, message: "Informe um valor númerico" }Isso me auxilia bastante quando estou desenvolvendo, com map | filter | reduce e me perco nas propriedades, e após corrigir podemos voltar para a maneira reduzida :)
Abraços e Bons Estudos!
Show, muito obrigado!
Valeu pela dica ><