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 typescript : Sélectionner tout - Visualiser dans une fenêtre à part
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 typescript : Sélectionner tout - Visualiser dans une fenêtre à part
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 typescript : Sélectionner tout - Visualiser dans une fenêtre à part
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