Discussion :

[Ushuango]

bonjour,

Je démarre l'apprentissage de composants fonctionnels ( il va bien falloir un jour ) avec les hooks
Pour l'instant, il s'agit d'un composant de pagination.

Code javacript :

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
import React, {useState, useEffect} from "react"
 
export default function Pagination(props) {
 
 
    const getNumber = (string) => {
        if (string) {
            let tab = string.split("=")
            return parseInt(tab[tab.length -1], 10)
        }
    }
 
    const [page, setPage] = useState(1)
    let last = getNumber(props.view["hydra:last"])
    let first = getNumber(props.view["hydra:first"])
 
    useEffect ( () => {
        // change animalPage in CardList component
        props.onPage(page)
    }, [page])
 
    return ( <div className="d-flex ms-4">
        {Object.keys(props.view).length !== 0 &&
            <nav>
                <ul className="animalsPagination  d-flex flex-column flex-sm-row text-center list-unstyled ms-4">
                {(first !== undefined && first !== page) && <li onClick={ () => setPage(page - 1)}>Précédent</li>}
                {(first === undefined || first === page) && <li className="disabled">Précédent</li>}
                <ul className="d-flex list-unstyled">
                    {(page !== first) && <li onClick={ () => setPage(first)}>{first}</li>}
                    {page - 1 > 2 && <li>...</li>}
                    { page - 1 > first && <li onClick={ () => setPage(page - 1)}>{page - 1 }</li>}
                    { page - 3 > first && <li onClick={ () => setPage(page - 2)}>{page - 2 }</li>}
                    <li className="actualPage">{page}</li>
                    {page + 1 < last && <li onClick={ () => setPage(page + 1)}>{page + 1}</li>}
                    {page + 3 < last && <li onClick={ () => setPage(page + 2)}>{page + 2}</li>}
                    {(last - page) > 2 && <li>...</li>}
                    {page !== last && <li onClick={ () => setPage(last)}>{last}</li>}
                </ul>
                {(last === undefined || page === last) && <li className="disabled">Suivant</li>}
                {(last !== undefined && last !== page) && <li onClick={ () => setPage(page + 1) }>Suivant</li>}
                </ul>
            </nav>
        }
    </div>
    )
}

Je commence le plus simple possible.
Donc , le simple fait de cliquer sur un endroit de la pagination change le numéro de page ( props.onPage est un callBack),
qui est envoyé à un autre composant.
Cet composant utilise le numéro pour générer un liste de Card ( qui correspond à la page souhaitée ).

Il se trouve que la page, en dehors de la liste et la pagination, contient un formulaire de recherche.
Lorsqu'une recherche est lancée, une nouvelle url est générée et transmise au composant Cardlist pour un nouveau rendu.
Tout ceci fonctionne bien, mais pas la pagination, car elle n'est pas réinitialisée à chaque nouvelle recherche !

Logique d'après le script ! je souhaiterais qu'à chaque nouvelle recherche, un élément des props ( ex: un booléen ) permette de remettre le numéro de page à 1 .
Ça ne doit pas être compliqué, mais j'ai encore du mal avec les useEffect , je provoque toujours des boucles infinies...
Je voudrais comprendre la logique qu'il faudrait appliquer pour arriver au résultat .

Laurent.

[Ushuango]

Bon je crois avoir trouvé: mettre une clé à ce composant ( la pagination ) et changer la clé monte un nouveau composant, donc avec la valeur initiale pour la page de 1

expliqué

Dans mon cas: <Pagination view={this.state.view} onPage={this.handlePage} key={this.state.key}/> de mon composant CardList
et lorsqu'il y a un changement d'url ( une nouvelle recherche ) j'incrémente la variable key.

C'est tout ce que j'ai trouvé, et je demande comme toujours , si c'est la meilleure façon.
Sinon, la documentation sur le sujet dans React ?

Laurent.