2 pièce(s) jointe(s)
Ré-exécuter une API après le changement d'une date
je consate que la mise à jour de mon post "[Débutant] comment bien utiliser useState avec une valeur par défaut " aborde une problématique similaire à ce que je développe sur ce sujet. J'ai regardé pour l'effacer sans succès. Je suis désolé pour cette forme de doublon
Bonjour à tous,
Je crée une app après avoir suivi un tuto et j'avance au fur et à mesure :D
Ce tuto m'a montré comment faire appel à une API qui va extraire les données d'une station météo (ou autres), stocké dans une base de donnée MySQL
Dans mon API je défini une date (from/to) des mesures que je veux afficher.
(En réalité, le script PHP va chercher la date de la dernière mesure pour la date TO, et il va définir cette date TO moins 24h pour la date FROM. (Le script est actuellement prêt à recevoir le GET['from'] et le GET['to] pour filtrer les nouvelles mesures))
Bien entendu, ca ne sert à rien si l'utilisateur ne peut pas séectionner une autre date pour visualiser des mesures. Je dois donc ajouter un calendrier pour le 'from' et un autre pour un 'to'
Pour le moment, j'arrive sans problème afficher les mesures en fonction des dates (from/to) définie statiquement. Mais il faudrait que lorsque je sélectionne de nouvelles dates, mon API soit rappelée pour avoir les mesures en fonction des nouvelles dates, évidemment :D. Malheureusement, je n'ai aucune idée comment le faire.
En ce qui concerne le DatePicke, le mieux que j'ai trouvé, c'est ceci .
Je vous montre donc comment mon code se présente actuellement:
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
|
export default function Station(){
// Je récupère l'ID de ma station (après avoir sélectionner la station que je veux visualiser depuis une autre vue)
const params = useLocalSearchParams() as {id: string};
// J'appelle mon API et je passe mon ID
const {data: getstation, isFetching} = useFetchQuery("/getstation/[id]", {id: params.id})
// Je sauve les mesures dans une variable
const measures = getstation?.stations?.[0].measures
// Dans la variable station, je stocke des données liées à la station uniquement
const station = getstation?.stations?.[0]
// J'ai besoin de la date de la dernière mesure qui sera utilisée dans mon calendrier pour qu'elle soit la date par defaut du calendrier, mais aussi pour qu'on ne puisse pas utiliser uen date suppérieur
const [dateFrom, setDateFrom] = useState(new Date(dayjs(station?.latest_measure).format("YYYY-MM-DD")));
const [dateTo, setDateTo] = useState(new Date(dayjs(station?.latest_measure).format("YYYY-MM-DD")));
// Ces deux fonctions sont appelées quand on sélectionne une date dans l'un des deux calendrier
const onChangeFrom = (event:any, selectedDate:any) => {
const currentDate = selectedDate;
console.log("DateFrom")
console.log(currentDate)
setDateFrom(currentDate);
};
const onChangeTo = (event:any, selectedDate:any) => {
const currentDate = selectedDate;
setDateTo(currentDate);
};
// Je construis plus haut 'dataset', mais dans ma problématique, ce code n'est pas utilise
console.log("dataset")
console.log(dataset)
// quand l'API a fini de recevoir les données on passe
if(isFetching)
{
return <RootView><Loading /></RootView>
}
else
{
return(
// Je pense que ce n'est utile de charger le code en montrant comment j'affiche mes mesures. Tout est dans dataset
<ThemedText>From</ThemedText>
<DateTimePicker
//testID="dateFrom"
value={dateFrom}
maximumDate={dateFrom}
mode="date"
onChange={onChangeFrom}
display="default"
/>
<ThemedText>To</ThemedText>
<DateTimePicker
//testID="dateFrom"
value={dateTo}
maximumDate={dateTo}
mode="date"
onChange={onChangeTo}
display="default"
/>
)
}
} |
Voilà donc comment ca se présente actuellement.
Avant d'exposer le problème plus en détail, je présente comment cela se comporte actuellement.
Quand je sélectionne une date 'from', mon terminal affiche ceci
Citation:
(NOBRIDGE) LOG DateFrom
(NOBRIDGE) LOG 2021-02-03T01:00:00.000Z
(NOBRIDGE) LOG dataset
(NOBRIDGE) LOG [{"data": [[Array]], "id_sensor": 9, "title": {"fontawesome": "temperature-full", "title": "Température haut [°C]"}}, {"data": [[Array]], "id_sensor": 16, "title": {"fontawesome": "battery-half", "title": "batterie [V]"}}]
Je vois que ma fonction onChangeFrom est bien appelé mais je vois aussi que le contenu de dataset est ré-affiché 8O . Je suis un peu surpis car uniquement ma fonction onChangeFrom devrait agir, non?
Le
[QUOTE]
Citation:
(NOBRIDGE) LOG DateFrom
(NOBRIDGE) LOG 2021-02-03T01:00:00.000Z
se réaffiche quand je ferme mon calendrier (voir ci-dessous) quand je clique en dehors du calendrier. (idéalement, j'aimerais bien qu'il se ferme après avoir sélectionner une date, mais je verai ca après)
C'est un peu comme si tout qui se trouve sous
Code:
export default function Station()
est appelé, dont l'API.
Est-ce que ca équivaut au rechargement de la vue et je pourrais rajouter des paramètres à
Code:
1
2
|
const params = useLocalSearchParams() as {id: string}; |
?
La problématique principale
Je ne sais pas si la manière d'appeler mon API est la bonne, car logiquement, ma fonction onChangeFrom() devrait faire appel à mon API en ajoutant les date from et to.
Non?
Dasn cette partie
Code:
const {data: getstation, isFetching} = useFetchQuery("/getstation/[id]", {id: params.id})
Je ne peux pas rajouter les paramètres, .. du genre:
Code:
const {data: getstation, isFetching} = useFetchQuery("/getstation/[id]/[from]/[to]", {id: params.id, from: dateFrom, to:dateTo})
puisque que mon useState ce trouve en dessous
Code:
1
2
| const [dateFrom, setDateFrom] = useState(new Date(dayjs(station?.latest_measure).format("YYYY-MM-DD")));
const [dateTo, setDateTo] = useState(new Date(dayjs(station?.latest_measure).format("YYYY-MM-DD"))); |
Donc je me demande si mon début de code est bien pensé, ou bien adapter à mon besoin.
Ou existe-t-il une autre méthode pour recharger une API?
Ou alors, est-ce que ma fonction onChangeFrom() devrait recharger la vue et ajouter ceci (ou un truc du genre)
Code:
1
2
|
const params = useLocalSearchParams() as {id: string, from:string, to:string}; |
Sur ce point, je suis un peu perdu et vous lumières me seraient d'une grande aide.
Pièce jointe 664692
Pièce jointe 664693
Merci beaucoup
