Ce n'est pas simple de reproduire le problème, j'ai essayé de recopier le code de ta page mais il manque des composants comme Carousel, le mieux pour qu'on puisse t'aider ça serait que tu nous partages un git.
Très joli sinon ton site, et puis j'arrive à lire la bande-annonce donc peut-être as-tu résolu le problème ?
oui j’ai résolu le pb le jour ou j’ai posté mais je devais attendre 24 h sur le forum afin de répondre une 2nd fois mais entre 2 j’ai été grippé et je n’ai plus eu la force d’ouvrir mon ordinateur pou revenir sur le forum
en fait, j’ai juste laissé tombé mon fichier modalvideo.js et j’ai repris le code de ce fichier en le mettant sur le fichier vidéo.js et la sans comprendre pourquoi ça a fonctionné. les mystères de l’informatique lol.
Sinon merci pour le compliment, ça fait plaisir. Et dire que je galere pour trouver du taf en dev Web…
la actuellement je me pose la question comment je peux récupérer les infos d’un film de l’api tmdb grâce à l’ID via un <Link to=«/Show »/>
Car mon navigateur est à peine capable de charger la page d'accueil et mon ventilateur commence à faire du bruit quand la page ce charge, pourtant il arrive à charger sans trop de difficulté des applications qui sont censé être plus lourde (Facebook, Linkedin, Youtube...).
J'ai quand même put faire un click droit examiner élément pour essayer de voir où est le problème.
Dans l'onglet network colonne XHR (qui affiche les requête réseaux effectuer par Javascript) donc on devrait voir dans cette colonnes quelque requête réseaux qui parte vers l'API de IMDB pour récupérer les infos des films.
Ton application fait continuellement des requêtes réseaux vers IMDB api, ces a dire qu'au bout de quelque secondes l'application fait des dizaines, peut-être même une centaine de requêtes réseaux vers IMDB est la liste de requêtes continue indéfiniment d'augmenter (je le vois car la bar de scroll des requêtes réseaux diminue de plus en plus donc il y a des requêtes qui sont ajoutées à la fin de la liste).
Vue que tu es dans une application React.js j'imagine très fortement que tu as un où plusieurs composant React qui se recharge en boucle est fait une requête réseaux aux passage.
Dans le code que tu as montré je ne vois pas le problème, peut-être un composant parent où un composant enfant que tu n'as pas posté.
A noter que ton composant Homepage commence à devenir très volumineux (~140 lignes de JSX pour 180 lignes total), une bonne idée pourrait être de le décomposer en composants plus petit de déplacer une partie du JSX dans un composant spécialisé et si besoin une partie de la logique aussi, ce sera bien plus simple pour toi de maintenir des composants moins gros avec un seul rôle, que de devoir modifier/débuger un composant de quasiment 200 lignes.
- Edité par SamuelGaborieau3 19 janvier 2023 à 9:12:49
Quaand je clique dessus, je récupère bien l'ID et le media_type (movie ou tv) dans l'url mais après sur mon autre page, comment je peux récupérer ses informations ?
Si ton composant "Show-list.jsx" répond à la route:
`/Show/${movie.media_type}/${movie.id}`
Il ne devrait pas recevoir les données de film/séries dans c'est props.
Il a juste accès au params dans l'url que tu peux lire avec le hooks useParams
C'est avec c'est paramètre là que tu effectues la requête réseaux pour récupérer les détails.
import React, {useState, useMemo, useEffect} from 'react'
import { Link } from 'react-router-dom'
import { Container, Row, Col } from 'react-bootstrap'
import Nav from "../Home/Nav/Nav"
import Footer from "../Home/Footer/Footer"
import { useParams } from 'react-router-dom'
const ShowList = () => {
const {id, media_type} = useParams()
// les détails du film/série qui par défaut sont inconnue
const [details, setDetails] = useState(null)
const url = React.useMemo(() => (
`https://api.themoviedb.org/3/${media_type}/${id}?api_key=${API_KEY}&language=fr-FR`
), [id, media_type])
// requête réseaux pour récupérer les détails du film/série
useEffect(() => {
fetch(url, {method: "GET"})
.then(response => response.json())
.then(_details => {
setDetails(_details)
})
.catch(error => {
console.warn("> cant fetch details for:" + media_type + "#" + id + " with: ", error)
})
}, [url])
// details est "null" donc la requête réseaux n'est pas terminée. (où elle a plantée)
if(!details) {
return (
<div>
chargement en cours...
</div>
);
}
const {title, name, overview} = details;
return (
<>
<Nav/>
<div className="video-container iq-main-slider">
<video className="video d-block" controls loop>
<source src="" type="video/mp4"/>
</video>
</div>
<div className="main-content">
<section className="movie-detail container-fluid">
<Row>
<Col lg="12">
<div className="trending-info season-info g-border">
<h4 className="trending-text big-title text-uppercase mt-0">{title || name}</h4>
<p className="trending-dec w-100 mb-0">{overview}
</p>
</div>
</Col>
</Row>
</section>
<Footer/>
</div>
</>
)
}
export default ShowList;
Ci-dessus le composant ne reçoit que le media_type et l'id du contenu est fait une requête réseaux vers l'API pour récupérer les détails du média.
Note a part:
Je n'ai pas lu le composant HomeSlider.jsx parce qu'il fait 230 lignes.
Je pense pas que ce soit utiles de posté des composant entier de 230 lignes sur le forum personnes de prendra le temps de lire le composant entier de chercher les modification avec l'ancienne version de ton composant ect...
Tout ce que j'ai vue c'est que ton composant est passer de ~180 lignes à ~230 lignes
ce qui commence à sérieusement à faire peur.
Tu devrais certainement re factoriser ce composant en de plus petits composants avant d'ajouter d'autre fonctionnalités.
- Edité par SamuelGaborieau3 20 janvier 2023 à 14:49:50
Oui c'est prévu de le redécomposer pour réduire tout ça.
En tout cas, merci beaucoup pour ton aide, je vais regarder car et je te tiendrais au courant si ca fonctionne.
Merci beaucoup pour tes conseils
Edit : Ca fonctionne, encore merci pour ton aide.
- Edité par Hôrn 20 janvier 2023 à 17:22:56
API Trailers TMDB avec ReactJS
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
suggestion de présentation.
suggestion de présentation.
suggestion de présentation.