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);
});
}
}