Utilisation de useContext
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:
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
Citation:
Cannot find namespace 'fieldContext'
Pourtant il juste en haut
Dans ma vue setting, J'ai ceci
J'ai importé
Code:
import {fieldContext} from "@/hooks/fieldContext";
J'ai commenté ceci et ca part en message d'erreur même si j'ai importé useContext
Code:
//const [field, setField] = useState("-1")
Alors je l'ai laissé décommenté et j'ai modifié fieldContext de al sorte
Code:
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:
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:
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:
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
