Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Cannot read properties of undefined (reading 'map')

Não consigo encontrar o problema do meu código no uso do método .map.

Vou enviar meus códigos:

ListaNegociacoes.js

class ListaNegociacoes {
    constructor () {
        this._negociacoes = [];
    }

    adiciona(negociacao) {
        this._negociacoes.push(negociacao);
    }

    get negociacoes() {
        return [].concat[this._negociacoes];
    }
}

NegociacoesController.js

class NegociacaoController {

    constructor(){
        let $ = document.querySelector.bind(document);

        this._inputData = $("#data")
        this._inputQuantidade = $("#quantidade")
        this._inputValor = $("#valor")   
        this._listaNegociacoes = new ListaNegociacoes();
        this._negociacoesView = new NegociacoesView($("#negociacoesView"));

        this._negociacoesView.update(this._listaNegociacoes);
    }

    adiciona(event) {
        event.preventDefault();
        this._listaNegociacoes.adiciona(this._criaNegociacao());
        this._negociacoesView.update(this._listaNegociacoes);
        this._limpaFormulario();
    }

    _criaNegociacao() {
        return new Negociacao (
            DateHelper.textoParaData(this._inputData.value),
            this._inputQuantidade.value,
            this._inputValor.value);
    }

    _limpaFormulario() {
        this._inputData.value = "";
        this._inputQuantidade.value = 1;
        this._inputValor.value = 0.0;
        this._inputData.focus();
    }
}

NegociacoesViews.js

class NegociacoesView {

    constructor(elemento) {
        this._elemento = elemento;
    }

    _template(model) {
        return `
        <table class="table table-hover table-bordered">
            <thead>
                <tr>
                    <th>DATA</th>
                    <th>QUANTIDADE</th>
                    <th>VALOR</th>
                    <th>VOLUME</th>
                </tr>
            </thead>

            <tbody id="tbody">
                ${model.negociacoes.map(n => {
                    return `
                    <tr>
                        <td>${DateHelper.dataParaTexto(n.data)}</td>
                        <td>${n.quantidade}</td>
                        <td>${n.valor}</td>
                        <td>${n.volume}</td>
                    </tr>
                    `
                }).join("")}
            </tbody>

            <tfoot>
            </tfoot>
        </table>
        `;
    }

    update(model) {
        this._elemento.innerHTML = this._template(model);
    }
}

Se alguém conseguir identificar meu problema, agradeço imensamente!

1 resposta
solução!

Encontrei o problema.

O get negociacoes da class ListaNegociacoes estava com sinal de [] após o concat, quando na verdade o correto é ().

Então após a correção, a classe ficou assim:

class ListaNegociacoes {
    constructor () {
        this._negociacoes = [];
    }

    adiciona(negociacao) {
        this._negociacoes.push(negociacao);
    }

    get negociacoes() {
        return [].concat(this._negociacoes);
    }
}

Fazendo essa correção, o .map funcionou corretamente.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software