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

[Dúvida] Sobre setColaboradores

Depois atualizar (adicionei os valores do formulario) o valor do estado da variável colaboradores, eu quis printar o valor colaboradores no console. Mas apareceu uma lista vazia. Porque esta acontecendo isso? Deveria aparece o valores que atualizei usando o setColaboradores, certo? Ou digitei algo errado?

function App() {

  const [colaboradores, setColaboradores] = useState([]);
  const aoNovoColaboradorAdicionado = (colaborador) => {
    setColaboradores([...colaboradores, colaborador]);
    console.log(colaboradores);

  }

  return (
    <div className="App">
      <Banner />
      <Formulario aoColaboradorCadastrado={colaborador => aoNovoColaboradorAdicionado(colaborador)}/>

      
    </div>
  );
}

export default App;
1 resposta
solução!

Olá, Iago! Como vai?

Entendo que esteja confuso, mas a explicação para o que está acontecendo é que o React atualiza o estado de maneira assíncrona. Isso significa que, quando você chama setColaboradores([...colaboradores, colaborador]), o React agenda uma atualização do estado, mas não a executa imediatamente.

Logo após essa chamada, quando você faz console.log(colaboradores), o estado ainda não foi atualizado, por isso você vê a lista vazia. O estado será atualizado em algum momento no futuro, antes do próximo render.

Aqui está um exemplo prático para entender melhor:

function App() {
  const [colaboradores, setColaboradores] = useState([]);

  const aoNovoColaboradorAdicionado = (colaborador) => {
    setColaboradores([...colaboradores, colaborador]);
    // aqui, colaboradores ainda tem o valor antigo
  }

  useEffect(() => {
    console.log(colaboradores);  // aqui, colaboradores terá o valor atualizado
  }, [colaboradores]);

  return (
    <div className="App">
      <Banner />
      <Formulario aoColaboradorCadastrado={colaborador => aoNovoColaboradorAdicionado(colaborador)}/>
    </div>
  );
}

export default App;

Neste exemplo, eu usei o hook useEffect para imprimir o valor de colaboradores sempre que ele for atualizado. Você verá que, dentro do useEffect, colaboradores tem o valor atualizado.

Espero ter ajudado e bons estudos!