Variables qui ne s'incrémentent pas
Bonsoir, je débute en React, j'ai suivi un tuto qui m'a permis de savoir comment manipuler les composants, leurs propriétés, les styles ... et pour m'exercer j'essaie de créer un petit site qui affiche des films à partir d'une API fournie par themoviedb.org. Les requêtes fonctionnent mais visiblement l'API fonctionne par pages de 20 films, il est donc impossible d'obtenir plus de 20 films en une seule requête, donc j'essaie de faire un système de pages avec une requête lancée à chaque clic sur un bouton "Page suivante" ou "Page précédente" mais je me rends compte que la variable de numéro de page ne s'incrémente qu'une seule fois, que ça soit avec une variable simple ou bien avec un hook.
Voici le code du composant concerné :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
| import axios from 'axios';
import React, {useState,useEffect} from 'react';
import Movie from './Movie';
const Movies = () => {
let api_key=...;
let [liste_films, setFilms]=useState([]);
let [lancer_requete, setLancer]=useState(true);
//let [numPage, setNumPage]=useState(1);
let numPage=1;
let [nbPages, setNbPages]=useState("");
useEffect(() => {
if(lancer_requete)
{
let requete="https://api.themoviedb.org/3/discover/movie?api_key="+api_key+"&language=fr-FR";
axios.get(requete).then((res) => {
setFilms(res.data.results);
setNbPages(res.data.total_pages);
setLancer(false);
});
}
},[liste_films]);
function requetePagePrecedente()
{
//setNumPage(numPage-1);
numPage--;
let requete="https://api.themoviedb.org/3/discover/movie?api_key="+api_key+
"&language=fr-FR&page="+numPage.toString();
axios.get(requete).then((res) => {
setFilms(res.data.results);
});
}
function requetePageSuivante()
{
//setNumPage(numPage+1);
numPage++;
let requete="https://api.themoviedb.org/3/discover/movie?api_key="+api_key+
"&language=fr-FR&page="+numPage.toString();
axios.get(requete).then((res) => {
setFilms(res.data.results);
});
}
return (
<div>
{numPage>=2 && <button onClick={() => requetePagePrecedente()}>Page précédente</button>}
{numPage<=parseInt(nbPages) && <button onClick={() => requetePageSuivante()}>Page suivante</button>}
<ul className="list">
{
liste_films.map((film) => {
return <Movie film={film} />
})
}
</ul>
{numPage>=2 && <button onClick={() => requetePagePrecedente()}>Page précédente</button>}
{numPage<=parseInt(nbPages) && <button onClick={() => requetePageSuivante()}>Page suivante</button>}
</div>
);
}
export default Movies; |
Lorsque je clique une fois sur "Page suivante" la 2ème page s'affiche puis ça ne fonctionne plus, d'après le console.log la variable "numPage" reste bloquée sur 2 pour une raison inconnue. De plus je ne comprends pourquoi "Page précédente" ne s'affiche pas alors que la condition d'affichage est vraie.
Merci par avance pour votre aide
