Recuperar Usuário Logado com Parse em React Native

7 min

obter usuário atual para react native introdução após implementar o registro e login do usuário, você precisa recuperar os dados do usuário atualmente logado para realizar diferentes ações e solicitações como o react native usa \asyncstorage\ como armazenamento local, esses dados podem ser recuperados usando \parse currentasync\ dentro do componente do seu aplicativo pré requisitos para completar este tutorial, você precisará um aplicativo react native criado e conectado ao back4app https //www back4app com/docs/react native/parse sdk/react native sdk complete os guias anteriores para que você possa ter uma melhor compreensão de a classe parse user https //www back4app com/docs/react native/parse sdk/working with users/react native login objetivo obter os dados do usuário atual buscando usando parse para um aplicativo react native 1 recuperando o usuário atual o método \parse currentasync\ pode ser usado em qualquer lugar do seu código, após configurar corretamente seu aplicativo para usar parse e asyncstorage sua resposta será o objeto do seu usuário atual ( \parse user\ ) ou null se não houver um usuário logado atualmente 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 }; este método é essencial em situações onde você não tem acesso ao estado do seu aplicativo ou aos dados do seu usuário, tornando possível realizar solicitações relevantes do parse em qualquer componente do seu aplicativo 2 usando o usuário atual em um componente react native em nossos guias anteriores, \parse currentasync\ já foi usado para testes e dentro do \hellouser\ componente aqui está o componente completo novamente 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 }; neste caso, o \parse currentasync\ método recupera o nome de usuário e atualiza a variável de estado que é renderizada dentro do jsx do componente conclusão no final deste guia, você aprendeu como recuperar os dados do usuário atual do parse do armazenamento local no react native no próximo guia, mostraremos como permitir que seu usuário redefina sua senha