Rafraichir un render après avoir recupérer une valeur local-storage
Bonjour à tous,
J'aimerais que l'utilisateur puisse paramètré le terrain qu'il souhaite surveiller.
Pour cela, dans la vue settings.tsx, j'utilise async-storage
Dans ma page settings.tsx, je le fais ainsi
Code:
1
2
3
4
5
6
7
8
9
10
| async function onFieldChange(value:string) {
setField(value)
try {
const jsonValue = JSON.stringify(value)
await AsyncStorage.setItem('field', jsonValue);
} catch (e) {
console.log("Error: AsyncStorage set item field")
console.log(e)
}
} |
Quand l'utilisateur change le dropmenu, la valeur est passée dans la fonction et est sauvée dans 'field'
Pour voir que tout c'est bien passé, j'ai encore cette fonction qui va m'afficher la valeur.
Code:
1
2
3
4
5
6
7
8
9
10
11
| async function getField(){
try{
const jsonValue = await AsyncStorage.getItem('field');
const f = jsonValue != null ? JSON.parse(jsonValue) : "-1";
console.info("[Settings] Field: " + f)
setField(f)
} catch (e) {
console.warn("Error: AsyncStorage set item field")
console.warn(e)
}
} |
Dans une autre vue (stations.tsx), j'ai besoin d'exploiter cette valeur pour extraire de ma base de donnée, toutes les stations qui sont enregistrées dans ce terrain.
J'autilise donc le fonction getField, ci dessus.
Quand je passe de la vue settings.tsx à la vue stations.tsx, le terrain sélectionné est bien afficher dans mon console.log().
Mon problème quand je retroune dans settings.tsx, je change de terrain et je retrourne dans stations.tsx, console.log() affiche le premier le terrain. J'ai beau faire ca 3-4 fois, il affichera toujours le premier terrain.
A mon avis, le premier render est conserver et j'ai besoin de rachraichir le render pour qu'à chaque fois que je retourne dans stations.tsx, après avoir changer le terrain, stations.tsx affiche les stations correspondant au terrain choisi.
Dans stations.tsx, j'ai essayé de faire ceci, en appelant ma fonction getField dans un useEffect quand field change
Ou de le mettre dans queryKey, sans succès
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
| const [field, setField] = useState<string>("0")
useEffect(()=>{
console.info("[Stations] UseEffect")
getField()
},[field])
const {data, isLoading, error} = useQuery({ // Min 52 https://www.youtube.com/watch?v=bpHq_-bPkGo
queryKey: ['stations', field],
queryFn: () => fetchStations(field)
}) |
Comment puis-je solutionner mon problème pour que ma vue change quand le paramètre est modifié dans une autre vue?
Bonne jounrée
