Discussion :

[pierrot10]

Bonjour à tous,

J'extrais des données d'une base de donnée qui conteint des mesures et des dates, avec React Native

J'ai besoin de connaitre la date de la dernière mesure et de l'utiliser dans un dateTimepicker: https://github.com/react-native-date...age-on-android

intro
Dans l'exemple ci-dessus, j'aimerais rempalcer

Code typescript :

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

const [date, setDate] = useState(new Date(1598051730000));

par la valeur d'une variable qui est un string

Code typescript :

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

1
2
3
 
const dateString = "2025-05-05 11:11:00"
const [date, setDate] = useState(new Date(dateString));

Développement
J'utilise donc un API

Code typescript :

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

1
2
3
const {data: getstation, isFetching} = useFetchQuery("/getstation/[id]", {id: params.id})
  const measures = getstation?.stations?.[0].measures
  const station = getstation?.stations?.[0]

la date qui doit être utilisée se trouve dans

Code typescript :

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

station?.latest_date

plus précisément, vous pouvez la voir aussi ici https://api.eco-sensors.ch/dashboard/getstation/1
(Fermer 'fields', puis fermer 'measures')

Etant donné que ceci est une date et qu'elle doit etre convertie en object (je n'arrive pas à le faire aussi ), pour l'exercice, j'utilise la valeur alt (altitude) qui est un strig

Code typescript :

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

const [alt, setAlt] = useState(station?.alt);

et aussi

Code typescript :

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

1
2
3
4
5
6
7
8
 
const altStr = station?.alt
const [alt, setAlt] = useState(altStr);
 
console.log("Altitude")
console.log(alt)
console.log(altStr)
console.log(station?.alt)

Je ne comprends pas pourquoi, les concole.log me retourne une valeur indéfinie pour alt, alors que 'station?.alt' retourn 300

(NOBRIDGE) Altitude
(NOBRIDGE) LOG undefined
(NOBRIDGE) LOG 300
(NOBRIDGE) LOG 300

Comment bien utiliser station?.alt (ou alrStr) dans useState()?

Après il faudra que j'utilise station?.latest_measure, qui est un string mais je devrai le convertir en un objet de date

Code typescript :

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

1
2
3
 
const dateString = "2025-05-05 11:11:00"
const [date, setDate] = useState(new Date(dateString));

Mais si j'arrive à faire la première étape, ca serait déjà un bon départ

Merciiii

[ABD-Z]

Bonsoir,

Il faut pas utiliser la fonction useeffect qui set l'état ?

Ce que tu essaies de faire, c'est à dire de faire des opérations à la racine, ne marche pas dans React.

[pierrot10]

Hello
Merci beaucoup pour ta réponse.
J'ai réussi à la faire ainsi en ajoutant dayjs

Code typescript :

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

1
2
3
4
 
import dayjs from 'dayjs'
[...]
const [dateFrom, setDateFrom] = useState(new Date(dayjs(station?.latest_measure).format("YYYY-MM-DD")));

Ca semble fonctionner, (pour le moment )

Qu'en penses-tu?

[ABD-Z]

Si ça marche tant mieux.

En effet useState on peut l'utiliser au début, autant pour moi.


Ceci je ne comprends pas du coup pq ça ne marche pas avant...

Bref..

Maintenant faut être aussi capable de changer l'état de date si besoin en fonction des évènements que l'app web reçoit, et cela se fait dans la fonction useEffect

[pierrot10]

Hello

Ceci je ne comprends pas du coup pq ça ne marche pas avant...

Je ne le faisais pas avec dayjs

Maintenant faut être aussi capable de changer l'état de date si besoin en fonction des évènements que l'app web reçoit, et cela se fait dans la fonction useEffect

Oui c'est mon problème maintenant et je n'ai aucune idée comment le faire. Je vais faire un nouveau post afin de ne pas mélanger les sujets

[pierrot10]

Finallement, ca ne fonctionne pas comme je le pensais

Mon code "complet" se trouve plus bas

Quand la vue se charge, le parametre ID est récupérée et utilisée dans l'api (J'utilise cette méthode)

Code typescript :

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

const {data: getstation, isFetching} = useFetchQuery("/getstation/[id]", {id: params.id})

Premièrement
Puis ceci n'affiche rien

Code typescript :

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

1
2
  console.log("dataset")
  console.log(dataset)

car l'API n'a pas fini de récupérer toutes les donnée. C'est pourquoi 'isFetching' retourne true et affiche la vue "loading"

Puisque 'station?.latest_measure' est encore null, la fonction dayjs() va retounrer la valeur de ce jour.

Code typescript :

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

 console.log(dayjs(station?.latest_measure).format("YYYY-MM-DD"))

et 'dateFrom' va prendre la valeur d'aujourd'hui

Code dateFrom :

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

const [dateFrom, setDateFrom] = useState(new Date(dayjs(station?.latest_measure).format("YYYY-MM-DD")));

deuxièmement
Quand l'API a fini de collecter toutes les données (2-3 secondes), ceci affiche ce que j'indique en commentaire

Code typescript :

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

1
2
3
4
5
6
7
8
9
console.log("Latest measure:")
  console.log(dayjs(station?.latest_measure).format("YYYY-MM-DD")) // La date de la dernière mesure
  console.log("dateFrom:")
  console.log(dateFrom) // la date d'aujourd'hui
  console.log("dateTo:")
  console.log(dateTo) // la date d'aujourd'hui
 
  console.log("dataset")
  console.log(dataset) // les données voules

Je pense (mais je ne suis pas sûre) que la manière dont j'ai appris à utiliser l'API n'est pas optimale.

A mon avis, le top serait d'attendre que l'API ait collectée toutes les données avant de continuer avec les useSate() tout en fournissant un "loading" pour l'utilisateur afin qu'il n'y ait pas une vue blanche sans indication, le temps que le processus se termine.

Mais comment adapter mon code?

screen: [id].tsx

Code typescript :

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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
 
 
export default function Station(){
 
  //const params = useLocalSearchParams() as {id: string, from?: string, to?: string};
  const params = useLocalSearchParams() as {id: string};
  //const {data: getstation, isFetching} = useFetchQuery("/getstation/[id]/[from]/[to]", {id: params.id, from: params.from ?? '2021-03-01', to: params.to ?? '2021-04-30'})
  const {data: getstation, isFetching} = useFetchQuery("/getstation/[id]", {id: params.id})
 
// PEUT-ON FAIRE UNE PAUSE ICI, POUR ATTENDRE QUE TOUTES LES DONNEES SOIENT COLLECTEES?
// MAIS COMMENT ALORS FAIRE UN LOADING POUR l'UTILISATEUR?
 
  const measures = getstation?.stations?.[0].measures
  const station = getstation?.stations?.[0]
 
 
 
  console.log("Latest measure:")
  console.log(dayjs(station?.latest_measure).format("YYYY-MM-DD"))
 
  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")));
 
 
  useLayoutEffect(()=>{
    console.log("useLayoutEffect")
  }, [])
 
  useEffect(()=>{
    console.log("useEffect")
  })
 
 
 
  //const navigation = useNavigation();
  const colors = useThemeColors()
 
  const onChangeFrom = (event:any, selectedDate:any) => {
    const currentDate = selectedDate;
    console.log("DateFrom")
    console.log(currentDate)
    setDateFrom(currentDate);
    //navigation.navigate('station', { id: "1" });
  };
 
  const onChangeTo = (event:any, selectedDate:any) => {
    const currentDate = selectedDate;
    console.log("DateTo")
    console.log(currentDate)
    setDateTo(currentDate);
  };
 
 
  const charts:any = []
  measures?.map((d,i) => {
    charts[i] = d.datasets?.data
  })
 
 
  const dataset = new Array()     
  measures?.map((d,i) => {
    dataset.push( {
      title: {
        title: d.datasets?.label,
        fontawesome: d.sensor_type_awe
      },
      data: [d.datasets?.data],
      id_sensor: d.id_sensor
    })
  })
 
 
 
  console.log("dateFrom:")
  console.log(dateFrom)
  console.log("dateTo:")
  console.log(dateTo)
 
  console.log("dataset")
  console.log(dataset)
 
 
    if(isFetching)
    {
      return  <RootView><Loading /></RootView>
    }
    else
    {
 
      return (
        <RootView>
 
          <Tabs.Screen
              options={{
                title: 'Station ' + station?.station_longname,
                headerLeft: () => (
                  <FontAwesome style={{marginLeft:15}} name='arrow-left' width={30} onPress={() => router.back()} />
                ),
                headerShown: false,
              }}
 
          /> 
{/* Reste du code */)
</RootView>
)
}

Je n'ai pas tout la fin du code de la vue, car le problème vient d'avant