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

TypeError: Cannot read properties of undefined (reading 'map')

Olá, tudo bem rodei o fórum mas não vi ninguém com este problema... E não consigo identificar aonde está errado, então que poderia ser?

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Segue os códigos passado em aula:

ListaDeCategoria.js

import { Component } from "react";
import "./style.css";

class ListaDeCategorias extends Component {

    constructor() {
        super();
        this.state = {category: []}
    }

    componentDidMount() {
        this.props.category.inscrever(this._newCategories.bind(this));
    }

    _newCategories(category) {
        this.setState({...this.state, category})
    }

    _handleEventInput(e) {
        if(e.key == "Enter") {
            let valueCategory = e.target.value;
            this.props.addCategory(valueCategory);
        }
    }
    render() {
        return (
            <section className="list-category"> 
                <ul className="list-category_list">
                    {this.state.category.map((category, index) => {
                        return <li key={index} className="list-category_item">{category}</li>;
                    })}
                </ul>
                <input 
                    type="text" 
                    placeholder="Adicionar Categoria" 
                    onKeyUp={this._handleEventInput.bind(this)}
                />
            </section>
        )
    }
}

export default ListaDeCategorias;

Categorias.js

export default class Categorias {
    constructor() {
        this.items = [];
        this._inscritos = [];
    }

    inscrever(func) {
        this._inscritos.push(func)
    }

    notificar() {
        this._inscritos.forEach(func => {
            func(this.category);
        });
    }

    addCategory = (newCategory) => {
        this.items.push(newCategory);
        this.notificar(this.category);
    }
}

App.js

import React, { Component } from "react";
import ListasDeNotas from "./components/ListasDeNotas/index";
import FormularioCadastro from "./components/FormularioCadastro/index";
import ListaDeCategorias from "./components/ListaCategorias";
import "./assets/App.css";
import './assets/index.css';
import Categorias from "./dados/Categorias";
import ArrayNotas from "./dados/Notas";

export default class App extends Component{

  constructor() {
    super();
    this.categorias = new Categorias();
    this.notas = new ArrayNotas();
  }

  render() {
    return (
      <section className="conteudo">
        <FormularioCadastro 
          category={this.categorias.items} 
          createdCard={this.notas.createdCard}
        />
        <main className="conteudo-principal">
          <ListaDeCategorias 
            addCategory={this.categorias.addCategory.bind(this.categorias)} 
            category={this.categorias}
          />
          <ListasDeNotas notas ={this.notas.notas} 
            deleteNota = {this.notas.deleteCard} 
          />
        </main>
      </section>
    );
  }
}
1 resposta
solução!

Olá Jéssica, boa noite! tudo bem com você?

Então, o erro acontece quando a variável que você está tentando dar map (no caso o categorias) está ou undefined ou não é um array.

Repliquei o erro aqui e o problema é que na sua função notificar você não está enviando this.items, está enviando this.category, e esta variável não existe no escopo da classe Categorias.

Desta forma aqui provavelmente vai funcionar:

notificar() {
    this._inscritos.forEach(func => {
        func(this.items);
    });
}

Bons estudos!

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