Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Ao remover a informação dos filmes do arquivo index da pasta MovieSection os filmes sumiram

Referente ao curso React: desenvolva aplicações tipadas e escaláveis com Typescript, no capítulo Tipando dados de API’s e atividade Fazendo requisições dos dados

por Diego Diaz Pimentel
| 45.7k xp | 54 posts

Após remover as informações dos filmes do arquivo index da pasta MovieSection os filmes sumiram. Seguem os arquivos:

index.tsx da pasta MovieSection

import React, { useEffect, useState } from 'react';
import styles from './MovieSection.module.css';
import Fieldset from '../Fieldset';
import InputText from '../InputText';
import { FaSearch } from 'react-icons/fa';
import Button from '../button/index';
import MovieList from '../MovieList';
import type { Movie } from '../../types';
import { getMovies } from '../../API';

const MovieSection = () => {
  const [movies, setMovies] = useState<Movie[]>([]);

  const fetchMovies = async () => {
    try {
        const movies = await getMovies();
        setMovies(movies);
    } catch (err) {
        console.error("Erro ao buscar filmes" + err)
    }
  };

  useEffect (() => {
    fetchMovies();
  });

  return (
    <main>
        <section className={styles.container}>
            <Fieldset variant='secondary'>
                <InputText placeholder='Buscar filme...'/>
                <Button variant='icon'>
                    <FaSearch/>
                </Button>
            </Fieldset>
            <h1 className={styles.titulo}>Em cartaz</h1>
            <MovieList movies={movies}/>
        </section>
    </main>
  );
};

export default MovieSection

db.json

{
    "movies": [
        {
            "id": 1,
            "src": "/capas_de_filmes/Card - Amanhecer.png",
            "alt": "Imagem do filme Amanhecer",
            "titulo": "Amanhecer",
            "categoria": "2D",
            "censura": "Livre",
            "genero": "Romance",
            "duracao": 90
        },
        {
            "id": 2,
            "src": "/capas_de_filmes/Card - Amigo da sombra.png",
            "alt": "Imagem do filme Amigo da sombra",
            "titulo": "Amigo da sombra",
            "categoria": "2D",
            "censura": "12 anos",
            "genero": "Suspense",
            "duracao": 110
        },
        {
            "id": 3,
            "src": "/capas_de_filmes/Card - Amigos do bosque mágico.png",
            "alt": "Imagem do filme Amigo do bosque mágico",
            "titulo": "Amigo do bosque mágico",
            "categoria": "2D",
            "censura": "Livre",
            "genero": "Animação",
            "duracao": 60
        },
        {
            "id": 4,
            "src": "/capas_de_filmes/Card - Caminho para o abismo.png",
            "alt": "Imagem do filme Caminho para o abismo",
            "titulo": "Caminho para o abismo",
            "categoria": "2D",
            "censura": "14 anos",
            "genero": "Horror",
            "duracao": 103
        },
        {
            "id": 5,
            "src": "/capas_de_filmes/Card - Desastres do Escritório.png",
            "alt": "Imagem do filme Desastres do Escritório",
            "titulo": "Desastres do Escritório",
            "categoria": "2D",
            "censura": "Livre",
            "genero": "Comédia",
            "duracao": 85
        },
        {
            "id": 6,
            "src": "/capas_de_filmes/Card - Mestres do futuro.png",
            "alt": "Imagem do filme Mestres do Futuro",
            "titulo": "Mestres do Futuro",
            "categoria": "2D",
            "censura": "Livre",
            "genero": "Documentário",
            "duracao": 120
        },
        {
            "id": 7,
            "src": "/capas_de_filmes/Card - La Esperanza.png",
            "alt": "Imagem do filme La Esperanza",
            "titulo": "La Esperanza",
            "categoria": "2D",
            "censura": "12 anos",
            "genero": "Drama",
            "duracao": 98
        },
        {
            "id": 8,
            "src": "/capas_de_filmes/Card - O nexus do tempo.png",
            "alt": "Imagem do filme O nexus do tempo",
            "titulo": "O nexus do tempo",
            "categoria": "3D",
            "censura": "10 anos",
            "genero": "Ficcção Científica",
            "duracao": 105
        }
    ]
}

index.ts da pasta API

import axios from "axios";
import type { Movie } from "../types";

const BASE_URL = "http://localhost:3001/";

export const getMovies = async (): Promise<Movie[]> => {
    const response = await axios.get<Movie[]>(`${BASE_URL}/movies`);
    return response.data;
};
2 respostas
solução!
por Ronaldo Cordeiro Schmidt
| 412.4k xp | 1071 posts

Olá Diego.
Tudo bem?
Segue algumas sugestões que podem corrigir o seu problema.
Vamos analisar as possíveis causas:
O seu useEffect está sendo executado de forma infinita, o que pode estar causando problemas na renderização dos filmes.
Para corrigir isso, você deve adicionar um array de dependências vazio [] ao useEffect, para que a função fetchMovies seja chamada apenas uma vez quando o componente for montado.
Corrigido:

useEffect(() => {
  fetchMovies();
}, []); // Passando um array vazio para que seja executado uma vez após o componente ser montado

Caso o arquivo db.json esteja sendo acessado localmente através do servidor, é possível que o caminho da API esteja incorreto ou que o servidor não esteja sendo executado.
Verifique se o seu servidor local está rodando e se a URL do backend está acessível.

Verifique se o servidor está funcionando:

  • Certifique-se de que o servidor local (que serve o db.json) esteja em execução e configurado corretamente.
  • Tente acessar diretamente a URL no navegador, como http://localhost:3001/movies, e verifique se os dados estão sendo retornados corretamente.

  1. Consolidação da estrutura do db.json:
    Se você removeu as informações de filmes do index.tsx e deixou de configurar corretamente o backend, os dados podem não estar sendo fornecidos pela API. Certifique-se de que o arquivo db.json esteja no local correto e que seu servidor esteja conseguindo lê-lo.

  2. Verifique se o tipo Movie está correto:
    A tipagem do seu estado movies está configurada corretamente com o tipo Movie[], mas caso haja alterações no formato dos dados retornados da API ou alguma discrepância, isso pode gerar erros. Verifique se a tipagem no arquivo types.ts está correta e corresponde ao formato de dados que você está recebendo do backend.

Sugestão de alterações no código:

  1. Correção do useEffect:

    useEffect(() => {
  fetchMovies();
}, []); // Corrigido para executar apenas uma vez após a montagem do componente

  2. Verificação do código de resposta na requisição:

    Para depurar melhor o problema e garantir que você está recebendo os dados corretamente, pode adicionar um log para verificar o que está sendo retornado pela API:

    const fetchMovies = async () => {
  try {
      const movies = await getMovies();
      console.log(movies); // Log para verificar os dados
      setMovies(movies);
  } catch (err) {
      console.error("Erro ao buscar filmes", err);
  }
};

  3. Verificação do servidor:

    Se estiver usando o json-server para servir o db.json, verifique se ele está rodando corretamente com o comando:

    json-server --watch db.json --port 3001

Teste ai e me manda um feedback.
Avise qualquer duvida.
Bons estudos.

por Diego Diaz Pimentel
| 45.7k xp | 54 posts

Muito obrigado, o principal problema era o json-server que não estava rodando. Ao aplicar o comando, ele passou a rodar. Também descobri o problema com o "const BASE_URL" que estava com o valor de "http://localhost:3001/" o que estava fazendo com que o local host ficasse "http://localhost:3001//movies". Depois de alterar ele para "http://localhost:3001", ele passou a buscar a URL correta.