TypeError: this.validacoes.map is not a function | React parte 2: Validação, Rotas e Integração com API

Solucionado (ver solução)

Solucionado
(ver solução)

3
respostas

por Cristiano

| 265.2k xp | 54 posts

Software Engineer

Boa noite galera, estou com o seguinte problema, já olhei o código várias vezes, comparei com o do professor, mas ele continua dando erro no map. Segue meu FormValidator.js

import validador from 'validator';

class FormValidator {

    constructor(validacoes) {
        this.validacoes = validacoes;
    }

    valida(state) {

        let validacao = this.valido();

        this.validacoes.forEach(regra => {
            const campoValor = state[regra.campo.toString()];
            const args = regra.args || [];
            const metodoValidacao = typeof regra.metodo === 'string' ? validador[regra.metodo] : regra.metodo;

            if(metodoValidacao(campoValor, ...args, state) !== regra.validoQuando) {
                validacao[regra.campo] = {
                    isInvalid: true,
                    message: regra.mensagem
                }
                validacao.isValid = false;
            } 
        });
        return validacao;
    }

    valido(){
        const validacao = {};

        this.validacoes.map(regra => (validacao[regra.campo] = {isInvalid : false, message:''}));

        return {isValid: true, ...validacao};
    }
}
export default FormValidator;

3 respostas

por Laís Cavalcanti

| 2576.8k xp | 4815 posts

Instrutor

06/05/2020

Oi, Cristiano, tudo bem?

Eu testei o seu código acima com o projeto da aula que é disponibilizado pelo instrutor, e esse erro não me é retornado, você verificou os demais arquivos? Se puder fazer, baixe o código completo do instrutor e utilize o seu código, pois ele me parece está de acordo com o instrutor: https://cursos.alura.com.br/course/react-validacao-rotas-api/task/59787

por Cristiano

| 265.2k xp | 54 posts

Software Engineer

06/05/2020

Opa Laís, tudo bom? oh esse é meu Formulario.js, logo após o término do primeiro vídeo da aula 2.

esses foram os que modifiquei durante a aula 1 e o inicio da 2

import React, { Component } from 'react';
import FormValidator from '../FormValidator/FormValidator';

class Formulario extends Component {

    constructor(props) {
        super(props);

        this.validador = new FormValidator({
            campo:'nome',
            metodo:'isEmpty',
            validoQuando: false,
            mensagem:'Entre com um nome'
        },{
            campo:'livro',
            metodo:'isEmpty',
            validoQuando: false,
            mensagem:'Entre com um livro'
        },{
            campo:'preco',
            metodo:'isInt',
            args:[{min: 0, max: 99999}],
            validoQuando: true,
            mensagem:'Entre com um valor númerico'
        });

        this.stateInicial = {
            nome: '',
            livro: '',
            preco: '',
            validacao: this.validador.valido()
        }

        this.state = this.stateInicial;
    }

    escutadorDeInput = event => {
        const { name, value } = event.target;

        this.setState({
            [name]: value
        });
    }

    submitFormulario = () => {

        const validacao = this.validador.valida(this.state);

        if(validacao.isValid){
            this.props.escutadorDeSubmit(this.state);
            this.setState(this.stateInicial);
        } else {
            const {nome,livro,preco} = validacao;
            const campos = [nome,livro,preco];

            const camposInvalidos = campos.filter(elem => {
                return elem.isInvalid;
            });
            camposInvalidos.forEach(console.log);
        }
    }

    render() {

        const { nome, livro, preco } = this.state;
        return (
            <form>
                <div className="row">
                    <div className="input-field col s4">
                        <label className="input-field" htmlFor="nome">Nome</label>
                        <input
                            className="validate"
                            id="nome"
                            type="text"
                            name="nome"
                            value={nome}
                            onChange={this.escutadorDeInput}
                        />
                    </div>

                    <div className="input-field col s4">
                        <label className="input-field" htmlFor="livro">Livro</label>
                        <input
                            className="validate"
                            id="livro"
                            type="text"
                            name="livro"
                            value={livro}
                            onChange={this.escutadorDeInput}
                        />
                    </div>

                    <div className="input-field col s4">
                        <label className="input-field" htmlFor="preco">Preço</label>
                        <input
                            className="validate"
                            id="preco"
                            type="text"
                            name="preco"
                            value={preco}
                            onChange={this.escutadorDeInput}
                        />
                    </div>

                    <button className="waves-effect waves-light indigo lighten-2 btn" onClick={this.submitFormulario} type="button">Salvar</button>
                </div>
            </form>
        );
    }
}
export default Formulario;

solução!

por Cristiano

| 265.2k xp | 54 posts

Software Engineer

06/05/2020

Ah fiz o seguinte, peguei o código do Formulario.js da aula 3, e usei ele comentando apenas as chamadas do componente PopUp e funcionou.

import React, { Component } from 'react';
import FormValidator from '../FormValidator/FormValidator';
// import PopUp from './PopUp';

class Formulario extends Component {

    constructor(props) {
        super(props);

            this.validador = new FormValidator([
            {
              campo: 'nome',
              metodo: 'isEmpty',
              validoQuando: false,
              mensagem: 'Entre com um nome'
            },
            { 
              campo: 'livro',
              metodo: 'isEmpty',
              validoQuando: false,
              mensagem: 'Entre com um livro'
            },
            { 
                campo: 'preco',
                metodo: 'isInt',
                args: [{min: 0, max: 99999}],
                validoQuando: true,
                mensagem: 'Entre com um valor numérico'
              }
          ]);

          this.stateInicial = {
            nome: '',
            livro: '',
            preco: '',
            validacao: this.validador.valido()
        }

        this.state = this.stateInicial;
    }

    submitFormulario = () => {
        const validacao = this.validador.valida(this.state);
        if(validacao.isValid){
            this.props.escutadorDeSubmit(this.state);
            this.setState(this.stateInicial);
        }else {
            const { nome, livro, preco } = validacao;
            const campos = [nome, livro, preco];
            const camposInvalidos = campos.filter(elem => {
                return elem.isInvalid
            });
            camposInvalidos.forEach(campo => {

                // PopUp.exibeMensagem('error', campo.message);
            });
        }



    }


    escutadorDeInput = event => {
        const { name, value } = event.target;

        this.setState({
            [name]: value
        });
    }


    render() {
        const { nome, livro, preco } = this.state;
        return (
            <form>
                <div className="row">
                    <div className="input-field col s4">
                        <label className="input-field" htmlFor="nome">Nome</label>
                        <input
                            className="validate"
                            id="nome"
                            type="text"
                            name="nome"
                            value={nome}
                            onChange={this.escutadorDeInput} />
                    </div>
                    <div className="input-field col s4">
                        <label className="input-field" htmlFor="livro">Livro</label>
                        <input
                            className="validate"
                            id="livro"
                            type="text"
                            name="livro"
                            value={livro}
                            onChange={this.escutadorDeInput} />

                    </div>
                    <div className="input-field col s4">
                        <label className="input-field col s4" htmlFor="preco">Preço</label>
                        <input
                            className="validate"
                            id="preco"
                            type="text"
                            name="preco"
                            value={preco}
                            onChange={this.escutadorDeInput} />
                    </div>
                </div>

                <button onClick={this.submitFormulario} className="btn waves-effect waves-light indigo lighten-2" type="button">Salvar
                </button>
            </form>
        );
    }
}
export default Formulario