Soporte de 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 respuestas (en la 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.

¿No encuentras una película o serie? Inicia sesión para crearla:

Global

s centrar la barra de búsqueda
p abrir menú de perfil
esc cierra una ventana abierta
? abrir la ventana de atajos del teclado

En las páginas multimedia

b retrocede (o a padre cuando sea aplicable)
e ir a la página de edición

En las páginas de temporada de televisión

(flecha derecha) ir a la temporada siguiente
(flecha izquierda) ir a la temporada anterior

En las páginas de episodio de televisión

(flecha derecha) ir al episodio siguiente
(flecha izquierda) ir al episodio anterior

En todas las páginas de imágenes

a abrir la ventana de añadir imagen

En todas las páginas de edición

t abrir la sección de traducción
ctrl+ s enviar formulario

En las páginas de debate

n crear nuevo debate
w cambiar el estado de visualización
p cambiar público/privado
c cambiar cerrar/abrir
a abrir actividad
r responder al debate
l ir a la última respuesta
ctrl+ enter enviar tu mensaje
(flecha derecha) página siguiente
(flecha izquierda) página anterior

Configuraciones

¿Quieres puntuar o añadir este elemento a una lista?

Iniciar sesión