Assistance de TMDB

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 réponses (sur la page 1 sur 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.

Un film, une émission télévisée ou un artiste est introuvable ? Connectez-vous afin de créer une nouvelle fiche.

Général

s Mettre le curseur dans la barre de recherche
p Ouvrir le menu du profil
esc Fermer une fenĂŞtre ouverte
? Ouvrir la fenĂŞtre des raccourcis clavier

Sur les pages des médias

b Retour (ou vers le parent si faisable)
e Afficher la page de modification

Sur les pages des saisons des émissions télévisées

Afficher la saison suivante (flèche droite)
Afficher la saison précédente (flèche gauche)

Sur les pages des épisodes des émissions télévisées

Afficher l'épisode suivant (flèche droite)
Afficher l'épisode précédent (flèche gauche)

Sur toutes les pages des images / photos

a Ouvrir la fenĂŞtre d'ajout d'image / photo

Sur toutes les pages de modifications

t Ouvrir le sélecteur de traduction
ctrl+ s Envoyer le formulaire

Sur les pages des discussions

n Créer une nouvelle discussion
w Basculer le statut de suivi
p Basculer publique / privée
c Basculer fermer / ouvrir
a Ouvrir l'activité
r Répondre à la discussion
l Afficher la dernière réponse
ctrl+ enter Envoyer votre message
Page suivante (flèche droite)
Page précédente (flèche gauche)

Paramètres

Vous souhaitez évaluer ou ajouter cet élément à une liste ?

Connexion