Suporte do The Movie Database

I am working with an api with movie react, I want to get the details of each movie but I don't get any results.

import React, { useEffect, useState ,useParams} from "react";
import { Routes,Route,Link } from 'react-router-dom'



//"
const Peliculas = () => {

const [popular, setPopular] = useState([]);


const fetchPopular = async  () => {
  const url =
  "
get popular movies"
  const data = await fetch(url);
    const movies = await data.json();
    setPopular(movies.results);
    //console.log(movies.results)
  };
  useEffect(() => {
    fetchPopular();
  }, []);

  return (
    <>
        <h2>pelis</h2>

        <ul>
          {popular.map(img =>
          <li key={img.id}><h3>{img.title}</h3><br/><Link to={"/detalles/"+img.id}>
           <img src={ "https://image.tmdb.org/t/p/w500"+ img.poster_path} alt={img.title}/>/</Link></li>)}          
        </ul>    
        </>
    )
  }
  const Detalle = () => {
    const [informacion , setInformacion] = useState();
    let {id} = useParams()
  const  fetchInformacion = () =>{  
      fetch('
get popular movies'+id)
        .then(response => response.json())
        .then(info => setInformacion(info))
        .catch(err => console.log(err.message))
        console.log(informacion.results)


  }
  useEffect(() => {
    fetchInformacion()

})
return (  
  <>
  { 
  informacion&&
  <section>
    <h1>{informacion.title}</h1>
    <img src={ informacion.poster_path} alt={informacion.title}/>        

    <p>Estreno :{informacion.release_date}</p>
    <p>Ranking {informacion.popularity}</p>

    <p><Link to="/">Regresar a la home</Link></p>
  </section>    
  }
  </>  
)
  }
 const App = () => (
  <>

      <Routes>
          <Route exact path="/" element={<Peliculas/>}/> 
          <Route exact path="/detalles/id" element={<Detalle/>}/>

      </Routes>        
  </>
); 

export default App;

2 respostas (na página 1 de 1)

Jump to last post

I don't understand anything about programming code.
But I think we can get more attention from someone who understands
if we add the name of the tool in the title of this conversation.

I believe you are doing something wrong. I recommend fetching your data with axios. try the way below:

import axios from 'axios'
const url = [the API]
const [data, setData] = useState()

  useEffect(()=>{
    axios.get(`${url}`)
      .then(response => {
        setData(response.data)
      })
      .catch(error => {
        console.error(error)
      })
  }, [])  

Also try to log it to check if you get the data correct. This should work properly. if you could console.log the data, then there should be no problem, the issue would be with the method you are using to show them. Best.

Não consegue encontrar um certo Filme ou Série? Inicie Sessão e adicione-o.

Geral

s focus the search bar
p abrir menu do perfil
esc close an open window
? open keyboard shortcut window

Em páginas de Média

b go back (or to parent when applicable)
e ir para a página de edição

Em Páginas de Temporadas de Séries

(seta para a direita) ir para a próxima temporada
(seta para a esquerda) ir para a temporada anterior

Em Páginas de Episódios de Séries

(seta para a direita) ir para o próximo episódio
(seta para a esquerda) ir para o episódio anterior

Em Todas as Páginas de Imagens

a abrir janela para adicionar imagem

Em Todas as Páginas de Edição

t open translation selector
ctrl+ s submit form

Em Páginas de Discussão

n criar uma nova discussão
w toggle watching status
p toggle public/private
c toggle close/open
a abrir actividade
r reply to discussion
l ir para a última resposta
ctrl+ enter submit your message
(seta para a direita) página seguinte
(seta para a esquerda) página anterior

Definições

Deseja classificar ou adicionar este item a uma lista?

Iniciar Sessão

Ainda não é um membro?

Crie uma Conta e Adere a Comunidade