1 pièce(s) jointe(s)
Utiliser useState avec une fonction async
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:
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:
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:
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:
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:
const [getField, setField] = useState<string>(getData)
j'ai un message d'erreur
Pièce jointe 664310
que je n'ai pas si je transformais ma fonction getData ainsi
Code:
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:
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
