Recupera utente corrente in React Native con Parse SDK

7 min

ottieni l'utente attuale per react native introduzione dopo aver implementato la registrazione e il login dell'utente, è necessario recuperare i dati dell'utente attualmente connesso per eseguire diverse azioni e richieste poiché react native utilizza \asyncstorage\ come memoria locale, questi dati possono essere recuperati utilizzando \parse currentasync\ all'interno del componente della tua app prerequisiti per completare questo tutorial, avrai bisogno di un'app react native creata e collegata a back4app https //www back4app com/docs/react native/parse sdk/react native sdk completa le guide precedenti in modo da avere una migliore comprensione di la classe parse user https //www back4app com/docs/react native/parse sdk/working with users/react native login obiettivo ottieni i dati dell'utente attuale recuperandoli utilizzando parse per un'app react native 1 recupero dell'utente attuale il metodo \parse currentasync\ può essere utilizzato ovunque nel tuo codice, dopo aver configurato correttamente la tua app per utilizzare parse e asyncstorage la sua risposta sarà l'oggetto del tuo utente attuale ( \parse user\ ) o null se non c'è un utente attualmente connesso 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 }; questo metodo è essenziale in situazioni in cui non hai accesso allo stato della tua applicazione o ai dati dell'utente, rendendo possibile eseguire richieste parse pertinenti in qualsiasi componente della tua app 2 utilizzare l'utente corrente in un componente react native nelle nostre guide precedenti, \parse currentasync\ è stato già utilizzato per i test e all'interno del \hellouser\ componente ecco di nuovo il componente completo 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 }; in questo caso, il \parse currentasync\ metodo recupera l'username e aggiorna la variabile di stato che viene renderizzata all'interno del jsx del componente conclusione alla fine di questa guida, hai imparato come recuperare i dati dell'utente corrente di parse dalla memoria locale su react native nella prossima guida, ti mostreremo come consentire al tuo utente di reimpostare la propria password