1
resposta

[Dúvida] Organo - UseEffect

Olá boa noite, tudo bem? Minha dúvida seria no desafio do vídeo abaixo:

https://cursos.alura.com.br/extra/alura-mais/hooks-do-react-useeffect-c1533

Ao utilizar o useState para retornar o dados dos times, os times não são preenchidos:

  const [colaboradores, setColaboradores] = useState([]);

  useEffect(() => {
    fetch('http://localhost:8080/inicial')
      .then(resposta => resposta.json())
      .then(dados => {
        setColaboradores(dados)
      })
  }, []);

O json está nesse formato:

{
  "inicial": [
    {
      "id": "uuidv4()",
      "favorito": false,
      "nome": "JULIANA AMOASEI",
      "cargo": "Desenvolvedora de software e instrutora",
      "imagem": "https: //www.alura.com.br/assets/img/lideres/juliana-amoasei.1647533644.jpeg",
      "time": "times[0].nome"
    },
    {
      "id": "uuidv4()",
      "favorito": false,
      "nome": "DANIEL ARTINE",
      "cargo": "Engenheiro de Software na Stone Age",
      "imagem": "https: //www.alura.com.br/assets/img/lideres/daniel-artine.1647533644.jpeg",
      "time": "times[0].nome"
            }
        ]
    }

Antes, os dados dos times estava em um array de objetos, exemplo abaixo:

  const inicial = [
    {
      "id": "uuidv4()",
      "favorito": false,
      "nome": "JULIANA AMOASEI",
      "cargo": "Desenvolvedora de software e instrutora",
      "imagem": "https: //www.alura.com.br/assets/img/lideres/juliana-amoasei.1647533644.jpeg",
      "time": "times[0].nome"
    },
    {
      "id": "uuidv4()",
      "favorito": false,
      "nome": "DANIEL ARTINE",
      "cargo": "Engenheiro de Software na Stone Age",
      "imagem": "https: //www.alura.com.br/assets/img/lideres/daniel-artine.1647533644.jpeg",
      "time": "times[0].nome"
        }
]
    

  const [colaboradores, setColaboradores] = useState(inicial);

Com o useState([]) é retornado o objeto diretamente, e os times não são preenchidos, alguém conseguiria me ajudar?

1 resposta

Olá, Iago! Como vai?

Esse erro ocorre porque no código do curso, foi realizada uma verificação para determinar a qual time o colaborador pertence, sendo eles: Programação, Front-end, Data Science, DevOps, UX e Design, Mobile, Inovação e Gestão. No arquivo "App.js", podemos encontrar o seguinte trecho de código:

{times.map((time, indice) => (
          <Time
            aoFavoritar={resolverFavorito}
            mudarCor={mudarCorDoTime}
            key={indice}
            time={time}
            colaboradores={colaboradores.filter(
              (colaborador) => colaborador.time === time.nome  //AQUI
            )}
            aoDeletar={deletarColaborador}
          />
        ))}

Entretanto, no arquivo "db-colaboradores.json" os nomes dos times estão setados no formato: times[0].nome, mas deveriam estar com o nome da área de tecnologia: programação, Front-End, etc. Dessa forma, realizando esta alteração os colaboradores serão renderizados corretamente na tela.

Ficaria assim:

{
  "colaboradores": [
    {
      "id": "uuidv4()",
      "favorito": "false",
      "nome": "JULIANA AMOASEI",
      "cargo": "Desenvolvedora de software e instrutora",
      "imagem": "https://www.alura.com.br/assets/img/lideres/juliana-amoasei.1647533644.jpeg",
      "time": "Programação"
    },
...RESTANTE DO CÓDIGO

Teste e veja se funcionou, espero ter ajudado e reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!