React Native
...
Users
Récupération de l'utilisateur avec Parse et React Native
7 min
obtenir l'utilisateur actuel pour react native introduction après avoir mis en œuvre l'enregistrement et la connexion des utilisateurs, vous devez récupérer les données de l'utilisateur actuellement connecté pour effectuer différentes actions et requêtes étant donné que react native utilise asyncstorage asyncstorage comme stockage local, ces données peuvent être récupérées en utilisant parse currentasync parse currentasync dans le composant de votre application prérequis pour compléter ce tutoriel, vous aurez besoin de une application react native créée et https //www back4app com/docs/react native/parse sdk/react native sdk complétez les guides précédents afin d'avoir une meilleure compréhension de https //www back4app com/docs/react native/parse sdk/working with users/react native login objectif obtenir les données de l'utilisateur actuel en les récupérant à l'aide de parse pour une application react native 1 récupération de l'utilisateur actuel la méthode parse currentasync parse currentasync peut être utilisée n'importe où dans votre code, après avoir correctement configuré votre application pour utiliser parse et asyncstorage sa réponse sera l'objet de votre utilisateur actuel ( parse user parse user ) ou null s'il n'y a pas d'utilisateur connecté actuellement javascript 1 const getcurrentuser = async function () { 2 const currentuser = await parse user currentasync(); 3 if (currentuser !== null) { 4 alert alert( 5 'success!', 6 `${currentuser get('username')} is the current user!`, 7 ); 8 } 9 return currentuser; 10 };1 const getcurrentuser = async function () promise\<parse user> { 2 const currentuser parse user = await parse user currentasync(); 3 if (currentuser !== null) { 4 alert alert( 5 'success!', 6 `${currentuser get('username')} is the current user!`, 7 ); 8 } 9 return currentuser; 10 }; cette méthode est essentielle dans les situations où vous n'avez pas accès à l'état de votre application ou à vos données utilisateur, ce qui permet d'effectuer des requêtes parse pertinentes dans n'importe quel composant de votre application 2 utiliser l'utilisateur actuel dans un composant react native dans nos guides précédents, parse currentasync parse currentasync a déjà été utilisé pour les tests et à l'intérieur du hellouser hellouser composant voici à nouveau le composant complet hellouser js 1 import react, {fc, reactelement, useeffect, usestate} from 'react'; 2 import {text, view} from 'react native'; 3 import parse from 'parse/react native'; 4 import styles from ' /styles'; 5	 6 export const hellouser = () => { 7 // state variable that will hold username value 8 const \[username, setusername] = usestate(''); 9	 10 // useeffect is called after the component is initially rendered and 11 // after every other render 12 useeffect(() => { 13 // since the async method parse user currentasync is needed to 14 // retrieve the current user data, you need to declare an async 15 // function here and call it afterwards 16 async function getcurrentuser() { 17 // this condition ensures that username is updated only if needed 18 if (username === '') { 19 const currentuser = await parse user currentasync(); 20 if (currentuser !== null) { 21 setusername(currentuser getusername()); 22 } 23 } 24 } 25 getcurrentuser(); 26 }, \[username]); 27	 28 // note the conditional operator here, so the "hello" text is only 29 // rendered if there is an username value 30 return ( 31 \<view style={styles login wrapper}> 32 \<view style={styles form}> 33 {username !== '' && \<text>{`hello ${username}!`}\</text>} 34 \</view> 35 \</view> 36 ); 37 }; hellouser tsx 1 import react, {fc, reactelement, useeffect, usestate} from 'react'; 2 import {text, view} from 'react native'; 3 import parse from 'parse/react native'; 4 import styles from ' /styles'; 5	 6 export const hellouser fc<{}> = ({}) reactelement => { 7 // state variable that will hold username value 8 const \[username, setusername] = usestate(''); 9	 10 // useeffect is called after the component is initially rendered and 11 // after every other render 12 useeffect(() => { 13 // since the async method parse user currentasync is needed to 14 // retrieve the current user data, you need to declare an async 15 // function here and call it afterwards 16 async function getcurrentuser() { 17 // this condition ensures that username is updated only if needed 18 if (username === '') { 19 const currentuser = await parse user currentasync(); 20 if (currentuser !== null) { 21 setusername(currentuser getusername()); 22 } 23 } 24 } 25 getcurrentuser(); 26 }, \[username]); 27	 28 // note the conditional operator here, so the "hello" text is only 29 // rendered if there is an username value 30 return ( 31 \<view style={styles login wrapper}> 32 \<view style={styles form}> 33 {username !== '' && \<text>{`hello ${username}!`}\</text>} 34 \</view> 35 \</view> 36 ); 37 }; dans ce cas, la parse currentasync parse currentasync méthode récupère le nom d'utilisateur et met à jour la variable d'état qui est rendue à l'intérieur du jsx du composant conclusion à la fin de ce guide, vous avez appris comment récupérer les données de l'utilisateur actuel de parse à partir du stockage local sur react native dans le prochain guide, nous vous montrerons comment permettre à votre utilisateur de réinitialiser son mot de passe