Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Bug] Não consigo fazer o useEffect funcionar (Desafio)

No desafio do conteúdo extra da formação de React que fala do useEffect (O desafio está no final do vídeo) (https://cursos.alura.com.br/extra/alura-mais/hooks-do-react-useeffect-c1533) tentei fazer o upload da lista de colaboradores do organo diretamente de um arquivo db-colaboradores.json.

Fiz tudo como manda o figurino, desde a criação do arquivo de acordo com o modelo dado até rodar ele para mockar um servidor.

Tudo funcionou mas na página não estão carregando os colaboradores. Fiz até console.log no app.js e meu fetch está funcionando perfeitamente, trazendo os dados dos colaboradores, mas eles não estão sendo carreganos na tela.

O arquivo anterior puxava diretamente de um array com todos os dados dos colaboradores. Tentei fazer como manda o desafio, e puxar estes dados do meu servido mockado mas não consegui. Detalhe que rodei o servidor .json no terminal na porta 8080 durante a execução do site, ou seja, fiz tudo certinho, e mesmo assim não carregou os colaboradores. Quem puder me ajudar agradeço! Sou muito iniciante, então pode ser uma besteira, não se assustem.

Segue o GIT do arquivo que estou trabalhando e tentando implantar o useEffect para trazer estes dados para o site: https://github.com/turisouza/organo3.git

Segue o GIT do arquivo anterior, onde os dados são puxados diretamente de um array que está no próprio app.js e que está funcionando perfeitamente: https://github.com/turisouza/organo2.git

Imagens do meu terminal só para verem que está rodando ok:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

2 respostas
solução!

Oi, Turi, tudo bem?

Inicialmente, o erro que aparece no console do navegador está relacionado à tentativa de acessar um arquivo "manifest.json" que não foi encontrado no diretório esperado. Esse problema ocorre quando a aplicação está configurada para usar %PUBLIC_URL% como parte do caminho, mas o servidor JSON não está tratando corretamente essa variável. Uma solução seria remover o %PUBLIC_URL% do código que faz o link com o "manifest.json" no arquivo "index.html" localizado na pasta "public".

Imagem do arquivo index.html indicando em qual parte do código é necessário remover o código %PUBLIC_URL%

Com relação aos colaboradores que não estão aparecendo na tela, isso ocorre, pois no curso foi feito uma verificação para comparar a qual time o colaborador pertence, sendo esses(Programação, Front-end, Data Science, DevOps, UX e Design, Mobile e Inovação e gestão). No arquivo "App.js" podemos ver o seguinte 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

Como você tem dois arquivos "db-colaboradores.json", essas mudanças devem ser aplicadas no arquivo que está na raiz do projeto.

Espero ter ajudado. Caso tenha dúvidas, conte com o fórum. Abraços!

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

Agradeço pela atenção meu amigo resolveu o problema colocar os nomes dos times no DB!