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

A List de filmes nao aparece na minha tela

Referente ao curso React: desenvolva aplicações tipadas e escaláveis com Typescript

por Elisangela Pethke
| 30.7k xp | 36 posts

Esse é o link do projeto no GitHub

https://github.com/elispethke/Luz-e-Cena

Nao sei porque mas as imgs dos filmes nao aparece o caminho das fotos estao corretos, porem nao esta como o professor fez no video.
um exemplo de do caminho das imagens:{
"id": 1,
"src": "/capa_de_filme/capas_de_filmes/amanhecer.png",
"alt": "Imagem do filme Amanhecer",
"titulo": "Amanhecer",
"categoria": "2D",
"censura": "Livre",
"genero": "Romance",
"duracao": 90
}, ja refiz tudo varias vezes e nao consigo achar o erro, vc poderia me ajudar por favor?

2 respostas
solução!
por Rafaela Petelin Silvério
| 1434.4k xp | 3238 posts
Alura Scuba Team

Oi Elisangela! Tudo bem?

Fiz o teste do seu projeto por aqui e os filmes foram mostrados corretamente como pode observar na imagem:

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

Acredito que o que está havendo é que você não está rodando a API Fake do Json Server enquanto roda o projeto. Para fazer isso, você precisa abrir dois terminais separados:


// Terminal 1 - para rodar o frontend
npm run dev


// Terminal 2 - para rodar o backend fake (Json Server)
json-server --watch db.json --port 3001

Explicando:

  • O npm run dev inicia seu projeto React normalmente.
  • O json-server --watch db.json --port 3001 inicia a API fake que fornece os dados dos filmes.
  • Eles precisam rodar ao mesmo tempo, cada um em um terminal diferente.

Se rodar só o frontend, ele tenta buscar os dados da API e não encontra, por isso os filmes não aparecem.

Espero ter ajudado. Conte com o apoio do Fórum na sua jornada. Fico à disposição.

Abraços e bons estudos!

  Caso este post tenha lhe ajudado, por favor, marcar como solucionado

por Elisangela Pethke
| 30.7k xp | 36 posts

Deu certo muito obrigada por sua ajuda. eu nao me liguei nesse detalhe de rodar os dois ao mesmo tempo.

Muito obrigada