1
resposta

O estado local não esta atualizando

Quando troco this.props.categorias.categorias.map para this.state.categorias.map nada acontece. A única forma que está funcionando é utilizando o props. O state local aparentemente não está atualizando.

Segue meu código:

App.js

import React, { Component } from "react";
import FormularioNota from "./components/FormularioNota";
import ListaDeNotas from "./components/ListaDeNotas";
import "./assets/App.css";
import './assets/index.css';
import ListaDeCategorias from "./components/ListaDeCategorias";
import Categorias from "./dados/Categorias";
import Notas from "./dados/Notas";

class App extends Component {
  constructor() {
    super();
    this.categorias = new Categorias();
    this.notas = new Notas();
  }

  render() {
    return (
      <section className="conteudo">
        {/* passando uma propriedade para o componente */}
        <FormularioNota 
          categorias={this.categorias}
          criarNota={this.notas.adicionarNota.bind(this.notas)}
        />
        <main className="conteudo-principal">
          <ListaDeCategorias 
            adicionarCategoria={this.categorias.adicionarCategoria.bind(this.categorias)}
            categorias={this.categorias}
          />
          <ListaDeNotas apagarNota={this.notas.apagarNota.bind(this.notas)} notas={this.notas} />
        </main>
      </section>
    );
  }
}

export default App;

ListaDeCategorias.jsx

import { Component } from "react";
import './estilo.css';

class ListaDeCategorias extends Component {
    constructor() {
        super();
        this.state = {categorias: []};
    }

    //quando o objeto esta sendo montando
    componentDidMount() {
        //se inscrevendo e passando a função _novasCategorias para receber resposta de quando houver alguma notificação/alteração
        this.props.categorias.inscrever(this._novasCategorias.bind(this));
    }

    _novasCategorias(categoria) {
        // muda o estado para o estado anterior mais o que tiver em categorias
        this.setState({...this.state, categoria});
        console.log(this.state.categorias);
    }

    _handleEventoInput(event) {
        if(event.key === "Enter") {
            let novaCategoria = event.target.value;
            this.props.adicionarCategoria(novaCategoria)
        }
    }

    render() {
        return(
            <section className="lista-categorias">
                <ul className="lista-categorias_lista">
                                    {/* nao funcionando, somente com props */}
                    {this.state.categorias.map((categoria, index) => {
                        return <li key={index} className="lista-categorias_item">{categoria}</li>
                    })}
                </ul>
                <input 
                    className="lista-categorias_input"
                    type="text" 
                    placeholder="Adicionar categoria" 
                    onKeyUp={this._handleEventoInput.bind(this)}
                />
            </section>
        );
    }
}

export default ListaDeCategorias;

classe Categorias.js

export default class Categorias {
   constructor() {
      this.categorias = [];
      this._inscritos = []; //outras classes inscritas
   }

   adicionarCategoria(novaCategoria) {
      this.categorias.push(novaCategoria);
      this.notificar();
   }

   //uma classe se inscreve para receber notificação dos dados atualizados
   //para se inscrever, essa classe precisa passsar uma função para onde vou mandar os dados atualizados
   //entao dentro da minha array de inscritos, estou armazenando todas as funções que vão receber a notificação
   inscrever(func) {
      this._inscritos.push(func);
   }

   //aqui é feito um loop no array de inscritos passando para cada função armazenada nele os dados atualizados
   //nesse caso, os dados atualizados é o array de categorias
   notificar() {
      this._inscritos.forEach(func => {
         func(this.categorias);
      });
   }
}
1 resposta

Fala Adria, tudo bem? Espero que sim!

Acredito que o problema seja no bind ao passar o método adicionarCategoria pelas propriedades:

Errado:

          <ListaDeCategorias 
            adicionarCategoria={this.categorias.adicionarCategoria.bind(this.categorias)} //Passando o bind como this.categorias
            categorias={this.categorias}
          />

Correto:

          <ListaDeCategorias 
            adicionarCategoria={this.categorias.adicionarCategoria.bind(this)} //Passando o bind como o this da classe
            categorias={this.categorias}
          />

Quando você passa o bind como this.categorias não é possivel encontrar o estado, sendo assim não é conseguimos atualiza-lo.

Testa ai e fala pra gente se deu certo, ta bom?

Abraços e bons estudos :D

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