Bonjour,

J'ai beaucoup de mal à comprendre comment implémenter useContext et vous aide me serait précieuse.

J'ai une vue setteings.tsx ou je dévini une préférence. Par exemple, je veux sélectionner un terrain à surveiller. Quand ceci est fait, dans une autre vue, je dois pouvoir utiliser cette valeur pour afficher les stations de CE terrain.

Si je reviens dans settings.tsx et je sélectionne un autre terrain, quand je reviens sur ma vue stations.tsx, les autres terrains correspondant à la dernière sélection doivent s'afficher.

J'ai donc créé un hook (qui dois etre truffé d'eereurs )

fieldContext.ts

Code typescript : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
import { createContext, useState } from 'react';
 
export const fieldContext = createContext("");
 
function fieldContextProvider (){
    const [field, setField] = useState("-1")
 
    return <fieldContext.Provider value={field}> </fieldContext.Provider>
}


fildContext.Provider me retourne une erreur
Cannot find namespace 'fieldContext'
Pourtant il juste en haut

Dans ma vue setting, J'ai ceci

J'ai importé
Code typescript : Sélectionner tout - Visualiser dans une fenêtre à part
import {fieldContext} from "@/hooks/fieldContext";

J'ai commenté ceci et ca part en message d'erreur même si j'ai importé useContext
Code typescript : Sélectionner tout - Visualiser dans une fenêtre à part
 //const [field, setField] = useState("-1")
Alors je l'ai laissé décommenté et j'ai modifié fieldContext de al sorte

Code typescript : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
import { createContext, useState } from 'react';
 
export const fieldContext = createContext("");
/*
function fieldContextProvider (){
    //const [field, setField] = useState("-1")
 
    return <fieldContext.Provider value={field}> </fieldContext.Provider>
}
*/
export default fieldContext;

Je reviens dans settings.tsx et j'ai mon formulaire (drop menu pour sélectionner le terrain ainsi

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
const fiii = useContext(fieldContext);
 
const [field, setField] = useState("-1")
 
function onFieldChange(value:string) {    
    setField(value)
  }
 
<fieldContext.Provider value={field}>
 
 
              <ThemedText style={{marginVertical:10}} variant={"subtitle2"} >Selectionner un terrain à surveiller</ThemedText>
              <Dropdown
                label="Vous recevrez des alarmes uniquement pour le terrain sélectionné."
                placeholder="Select an option..."
                options = {fields}
                selectedValue={field}
                onValueChange={(value:any) => onFieldChange(value)}
                primaryColor={'green'}
                dropdownStyle={{
                  borderWidth: 1, // To remove border, set borderWidth to 0
                  borderColor: colors.grayLight,
                  alignItems: "center",
                }}
              />
 
<ThemedText>Field (useState): {field}</ThemedText>
 
              <ThemedText>Field Context: {fiii}</ThemedText>
</fieldContext.Provider>

Quand je sélectionne un autre terrain depuis mon drop menu

Code typescript : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
<ThemedText>Field (useState): {field}</ThemedText>
<ThemedText>Field Context: {fiii}</ThemedText>

'fiii' m'affiche toujours -1, alors que 'field' affiche la sélection faite.
Pourtant fiii doit aussi afficher la valeur voulue

J'ai beau chercher sur le net, je ne trouve rien.
J'ai vu des exemple, ou
Code typescript : Sélectionner tout - Visualiser dans une fenêtre à part
const [field, setField] = useState("-1")
se trouve dans fieldContext.ts, mais généralement, se sont des examples de 1 à 2 ans d'âge et qui ne représente pas la nouvelle architecture.

Comment pouvez-vous m'aider?
Est-ce que useContext permet de préserver la valeur quand je ferme l'app?

Je vous remercie pour vos lumières