React Native
...
Users
React NativeでParseの現在のユーザーを取得する方法
6 分
react nativeの現在のユーザーを取得する はじめに ユーザー登録とログインを実装した後、さまざまなアクションやリクエストを実行するために、現在ログインしているユーザーデータを取得する必要があります。react nativeは asyncstorage asyncstorage をローカルストレージとして使用しているため、このデータはアプリのコンポーネント内で parse currentasync parse currentasync を使用して取得できます。 前提条件 このチュートリアルを完了するには、次のものが必要です: 作成されたreact nativeアプリと back4appに接続されている 前のガイドを完了して、 parseユーザークラス についてより良い理解を得ること。 目標 react nativeアプリのためにparseを使用して現在のユーザーデータを取得する。 1 現在のユーザーを取得する このメソッド parse currentasync parse currentasync は、parseとasyncstorageを使用するようにアプリを適切に構成した後、コードのどこでも使用できます。その応答は、現在のユーザーのオブジェクト( parse user parse user ) であり、現在ログインしているユーザーがいない場合はnullになります。 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 }; このメソッドは、アプリケーションの状態やユーザーデータにアクセスできない状況で不可欠であり、アプリの任意のコンポーネントで関連するparseリクエストを実行できるようにします。 2 react nativeコンポーネントでの現在のユーザーの使用 前回のガイドでは、 parse currentasync parse currentasync がテスト用に使用され、 hellouser hellouser コンポーネント内でも使用されました。こちらが再度完全なコンポーネントです 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 }; この場合、 parse currentasync parse currentasync メソッドはユーザー名を取得し、コンポーネントのjsx内にレンダリングされる状態変数を更新します。 結論 このガイドの最後に、react nativeでローカルストレージから現在のparseユーザーデータを取得する方法を学びました。次のガイドでは、ユーザーがパスワードをリセットできるようにする方法を示します。