IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

React Discussion :

Variables qui ne s'incrémentent pas


Sujet :

React

  1. #1
    Membre régulier
    Homme Profil pro
    Technicien maintenance
    Inscrit en
    août 2013
    Messages
    273
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Technicien maintenance
    Secteur : Industrie

    Informations forums :
    Inscription : août 2013
    Messages : 273
    Points : 98
    Points
    98
    Par défaut 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 : 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

  2. #2
    Membre éprouvé
    Avatar de gwyohm
    Homme Profil pro
    Développeur informatique
    Inscrit en
    octobre 2007
    Messages
    901
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : octobre 2007
    Messages : 901
    Points : 1 291
    Points
    1 291
    Par défaut
    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
    on ne dit pas "ça ne marche pas" on dit "je suis incapable de faire fonctionner correctement les outils mis à ma disposition"
    Pas de question technique par MP

  3. #3
    Membre régulier
    Homme Profil pro
    Technicien maintenance
    Inscrit en
    août 2013
    Messages
    273
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Technicien maintenance
    Secteur : Industrie

    Informations forums :
    Inscription : août 2013
    Messages : 273
    Points : 98
    Points
    98
    Par défaut
    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 !

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Variable qui ne s'incrémente pas !
    Par winflow dans le forum VB 6 et antérieur
    Réponses: 5
    Dernier message: 03/01/2014, 22h29
  2. Variable qui ne s'incrémente pas !
    Par winflow dans le forum VB.NET
    Réponses: 13
    Dernier message: 03/01/2014, 16h35
  3. VBA- Une variable qui ne s'incrémente pas.Pourquoi ?
    Par gwen.s dans le forum Macros et VBA Excel
    Réponses: 1
    Dernier message: 03/05/2010, 22h24
  4. Réponses: 4
    Dernier message: 11/11/2007, 09h41
  5. Variable qui ne prend aucune pas de valeur
    Par bdptaki dans le forum Delphi
    Réponses: 3
    Dernier message: 29/04/2007, 16h09

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo