Por que o novoEstado do adicionarCategoria é diferente do novoEstado do criarNota ?
criarNota(titulo, texto) { const novaNota = { titulo, texto }; const novoArrayNotas = [...this.state.notas, novaNota]; const novoEstado = { notas:novoArrayNotas, }; this.setState(novoEstado); }
adicionarCategoria(nomeCategoria){ const novoArrayCategorias = [...this.state.categorias, nomeCategoria] const novoEstado = {...this.state, categorias:novoArrayCategorias}; this.setState(novoEstado); }
Olá, Roberto, tudo bem?
Bem observado! A verdade é que quando você vai atribuir o novo objeto de estado, utilizar o ...this.state é opcional. Ou seja, nesse caso temos o seguinte estado, com as propriedades notas e categorias:
this.state = {
notas: [],
categorias: [],
};E quando vamos atualizar o estado ao adicionar uma nova nota, temos:
criarNota(titulo, texto) {
const novaNota = { titulo, texto };
const novoArrayNotas = [...this.state.notas, novaNota];
const novoEstado = {
// Não está sendo utilizado o ...this.state
notas: novoArrayNotas,
};
this.setState(novoEstado);
}Teoricamente o novoEstado sobrescreveria totalmente o this.state e perderíamos a propriedade categorias, certo? Bem, isso na verdade não acontece, pois o próprio React previne esse comportamento!
Dizemos que as atualizações do state são mescladas. Quando vamos atualizar uma propriedade direta do state (nesse caso notas), não precisamos nos preocupar com as outras, pois o React as manterá intactas! Você pode ler sobre isso na documentação (existem outras coisas bem interessante sobre o setState() nessa página).
Espero ter ajudado! Se tiver mais dúvidas, estaremos aqui para te auxiliar. Bons estudos! :)