1
resposta

[Dúvida] sobre: setColaboradores([...colaboradores, colaborador])

Olá, desde já agradeço a ajuda

import { useState } from "react";
import Banner from "./componentes/Banner";
import Formulario from "./componentes/Formulario";

function App() {

//cada vez q o colaborador for cadastrado acrescente a lista
const [colaboradores, setColaboradores] = useState([])


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

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

  </div>
);
}

export default App;

Estou com duvida nesse trecho:

setColaboradores([...colaboradores, colaborador])

Professor falou que ele esta espalhando os colaboradores aqui ....

Entendi a logica até quando a const aoNovoColaboradorAdicionado captura os valores através do parâmetro colaborador. Mas me perdi um pouco no raciocínio nessa parte. Por favor me explique.

1 resposta

Vamos analisar essa linha de código em detalhes:

setColaboradores([...colaboradores, colaborador])

Essa linha está atualizando o estado colaboradores usando a função setColaboradores do React. Vamos quebrá-la em partes:

  1. [...colaboradores]: Isso está criando uma cópia do array colaboradores atual. O operador de propagação (...) é usado para espalhar os elementos do array original em um novo array. Isso é necessário porque em React, você não deve modificar diretamente o estado existente, mas sim criar um novo estado com as atualizações necessárias.

  2. colaborador: Este é o novo colaborador que foi passado como parâmetro para a função aoNovoColaboradorAdicionado.

  3. [...colaboradores, colaborador]: Aqui, estamos combinando a cópia do array de colaboradores existente com o novo colaborador, criando assim um novo array que contém todos os colaboradores anteriores mais o novo colaborador.

  4. setColaboradores([...colaboradores, colaborador]): Finalmente, estamos atualizando o estado colaboradores com o novo array que contém todos os colaboradores anteriores mais o novo colaborador. O React irá re-renderizar o componente com base nessa atualização de estado.

Em resumo, essa linha de código está adicionando um novo colaborador ao array existente de colaboradores, mantendo intactos os colaboradores anteriores e criando uma nova cópia do array de colaboradores com o novo colaborador adicionado. Isso é feito para garantir a imutabilidade do estado em React, conforme recomendado pela documentação oficial.