Problema com useState | React: entendendo como a biblioteca funciona

Se eu tiro o setNotas, o meu array de notas vai acumulando as notas como deve ser. Mas quando coloco o setNotas, o arrayNotas sobrescreve, parece que não faz mais o push. Porque isso? E como resolver?

import { useState } from 'react';

import "./assets/App.css";

import ListaDeNotas from "./componentes/ListaDeNotas/ListaDeNotas";
import FormularioNota from "./componentes/FormularioNota/FormularioNota";

const App = () => {
  var arrayNotas = [];

  const [notas, setNotas] = useState([]);

  const criarNota = (titulo, descricao) => {
    const novaNota = {
      titulo: titulo,
      descricao: descricao
    };

    arrayNotas.push(novaNota);
    setNotas(arrayNotas);
  }

  return (
    <div className="App">
      <FormularioNota obterInformacoesFormulario={criarNota}/>
      <ListaDeNotas obterNotas={notas}/>
    </div>
  );
}

export default App;

Olá, Ashiley, tudo bem?

O problema é que você está declarando arrayNotas fora da função criarNota, no nível mais alto do componente App. Não devemos fazer isso, já que a informação que realmente queremos manipular é o state notas, e apenas ele deve ser declarado no nível mais alto.

(O nível mais alto do componente é o escopo de dentro do componente que não está dentro de nenhuma função ou bloco de código.)

Isso gera um comportamento inesperado ao usar o setNotas, nesse caso sempre que uma nota é adicionada, o código var arrayNotas = []; é executado novamente, limpando o array que você está usando para atualizar as notas.

Então primeiro, remova essa declaração. Em seguida, dentro da função criarNota, adicione essa linha depois de declarar novaNota:

    var arrayNotas = [...notas, novaNota];

Agora podemos remover essa linha:

arrayNotas.push(novaNota);

Assim, quando essa função for chamada, arrayNotas receberá o valor atualizado do estado notas e adicionará a novaNota. Dessa forma poderemos atualizar corretamente o state.

O código do componente App ficará assim:

const App = () => {

  const [notas, setNotas] = useState([]);

  const criarNota = (titulo, descricao) => {
    const novaNota = {
      titulo: titulo,
      descricao: descricao
    };

    var arrayNotas = [...notas, novaNota];
    setNotas(arrayNotas);
  }

  return (
    <div className="App">
      <FormularioCadastro obterInformacoesFormulario={criarNota} />
      <ListaDeNotas obterNotas={notas} />
    </div>
  );
}

Espero ter ajudado! Abraços e bons estudos :)

Mergulhe em programação