Discussion :

[KevinduC]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[gwyohm]

salut,
pour que react "voie" le changement, tu dois utiliser useState. ceci explique que ton bouton précédent ne s'affiche pas.

sachant ça, j'aurai fait différemment : au lieu de faire une fonction page suivante et page précédente, j'aurai sur le click des boutons précédent et suivant fait directement setNumpage(numpage+1) et setNumpage(numpage-1)
ensuite un autre useEffect qui n'observe que numpage, fait la requête et fait appel à setFilms

[KevinduC]

Salut, merci pour ta réponse, effectivement ça fonctionne mieux si j'appelle setNumPage() directement dans le callback de l'événement bouton mais je constate que lorsque je clique sur "Page suivante" la page reste égale à 1 la première fois mais pas la 2ème fois, j'ai compris que c'était parce que le temps que la requête s'exécute le bouton "Page précédente" apparaît et vient de positionner à la place de "Page suivante" donc en fait j'ai cliqué sur "Page suivante" et "Page précédente" en même temps. J'ai alors essayé avec useEffect() mais le compilateur m'a affiché un message d'erreur : "React Hook "useEffect" cannot be called inside a callback"

Edit : Ça fonctionne finalement en mettant simplement le useEffect() en-dehors du callback, merci !