Discussion :

[pierrot10]

Bonjour à tous,

Je reprends mon apprentissage avec React Native après 3 semaines.

Est-ce possible qu'un fonction, qui va lire la clé et la valeur stockée dans Async Storage, avant que la page se charge? Ceci pour ajouter la valeur par défaut à

Code typescript :

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

const [getField, setField] = useState<string>(ma_valeur)

Plus concrètement, je dois enregistrer des valeurs localement. Pour cela j'utilise Asyc Strorage https://react-native-async-storage.g...age/docs/usage

J'arrive enregistrer une valeur et je la lis de cette manière.

Code typoscript :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
const [getField, setField] = useState<string>()
 
  async function getData(){
    console.log("# GETDATA")
    const jsonValue = await AsyncStorage.getItem('@field');
    const r = jsonValue != null ? JSON.parse(jsonValue) : null;
    console.log("r:")
    console.log(r)
    setField(r)
    return r
  }

J'extrais tous mes terrains (d'une base de donnée) que j'affiche dans une dropdown list. Voici un extrait mais qui n'est la source de mon problème. J'attire votre attention sur getField

Code typescript :

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

1
2
3
4
5
6
7
8
<Dropdown
          label=" "
          placeholder="Select an option..."
          options = {fields}
          selectedValue={getField}
          onValueChange={(value:any) => onFieldChange(value)}
          primaryColor={'green'}
        />

Plus de détail: https://github.com/azeezat/react-nat...with-flat-list

Pour définir la valeur par default , il veut getField (useState). J'ai donc ceci

Code typescript :

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

const [getField, setField] = useState<string>()

(Pour info: le setField est défini quand j'enregistre ma valeur dans Async Storage avec le clé @field)

Le problème est que dans l'état, la valeur getField est inconnue car on n'a pas encore lu la valeur de @field stoquée dans async Storage. Vous me suivez?
En d'autres thermes, getField n'a pas de valeur par défaut quand on ouvre la page car la valeur voulue est stockée dans Async Storage et n'a pas encore été lue

Pour essayer de résoudre ma problématique, Je me suis inspiré de la fonction 'createInitialTodos' que l'on voit ici https://react.dev/reference/react/us...lizer-function

Mon problème est que ma fonction getData est async, donc si je fais

Code typescript :

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

const [getField, setField] = useState<string>(getData)

j'ai un message d'erreur

que je n'ai pas si je transformais ma fonction getData ainsi

Code typescript :

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

1
2
3
4
 function getData(){
    console.log("# GETDATA")
    return r
  }

Je comrpends donc que ce problème est causé par le fait que ma fonction est async.

Je ne comprends pas le message d'erreur et comment modifier mon code, soit ici

Code typescript :

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

const [getField, setField] = useState<string>(getData)

ou lorsque je déclare ma fonction getData() en ajoutant un Promise.....

Je reviens à la question qui introduit ce post, est-ce possible que le contenu de Async Storage (selon une clé) soit lu avant le chargement de la page?

Est-ce que le contenu de mon post est compréhensible?

Merci pour vos lumières

[pierrot10]

J'ai réussi à faire quelque chose avec le fonction useEffect

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
 
 useEffect(()=>{
    console.log("useEffect")
    getData();
  }, [])
 
 async function getData(){
    console.log("# GETDATA")
    const jsonValue = await AsyncStorage.getItem('field');
    const r = jsonValue != null ? JSON.parse(jsonValue) : "-1";
    console.log("r:")
    console.log(r)
    setField(r)
  }

Qu'en pensez-vous, est-ce la bonne solution?
Ca semble bien fonctionner