ReactでParseの現在のユーザー情報を取得する方法

6 分

reactの現在のユーザーを取得するはじめにユーザー登録とログインを実装した後、さまざまなアクションやリクエストを実行するために、現在ログインしているユーザーデータを取得する必要があります。このデータは、アプリコンポーネント内で parse user current parse user current を使用することで迅速に取得できます。前提条件このチュートリアルを完了するには、次のものが必要です作成されたreactアプリと back4appに接続されている前のガイドを完了して、 parse userクラスとparse user loginメソッドについての理解を深める https //www back4app com/docs/react/working with users/react user login のが良いでしょう。このガイドで提供されている画面レイアウトをテスト/使用したい場合は、 ant design ant design ライブラリを設定する必要があります。目標 reactアプリ用にparseを使用して現在のユーザーデータを取得します。 1 現在のユーザーを取得するメソッド parse user current parse user current は、parseを使用するようにアプリを適切に構成した後、コードのどこでも使用できます。その応答は、現在のユーザーのオブジェクト（ parse user parse user ）または現在ログインしているユーザーがいない場合はnullになります。 javascript 1 const getcurrentuser = async function () { 2 const currentuser = await parse user current(); 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 | null> { 2 const currentuser parse user = await parse user current(); 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コンポーネントでの現在のユーザーの使用前回のガイドでは、 parse user current parse user current メソッドがすでに使用されており、ユーザーログインガイドで現在のユーザー名を表示するテストが行われました。こちらが userlogin userlogin コンポーネントコードです。 getcurrentuser getcurrentuser 関数を詳しく見てみましょう userlogin js 1 import react, { usestate } from 'react'; 2 import parse from 'parse/dist/parse min js'; 3 import ' /app css'; 4 import { button, divider, input } from 'antd'; 5	 6 export const userlogin = () => { 7 // state variables 8 const \[username, setusername] = usestate(''); 9 const \[password, setpassword] = usestate(''); 10 const \[currentuser, setcurrentuser] = usestate(null); 11	 12 const douserlogin = async function () { 13 // note that these values come from state variables that we've declared before 14 const usernamevalue = username; 15 const passwordvalue = password; 16 try { 17 const loggedinuser = await parse user login(usernamevalue, passwordvalue); 18 // login returns the corresponding parseuser object 19 alert( 20 `success! user ${loggedinuser get( 21 'username' 22 )} has successfully signed in!` 23 ); 24 // to verify that this is in fact the current user, `current` can be used 25 const currentuser = await parse user current(); 26 console log(loggedinuser === currentuser); 27 // clear input fields 28 setusername(''); 29 setpassword(''); 30 // update state variable holding current user 31 getcurrentuser(); 32 return true; 33 } catch (error) { 34 // error can be caused by wrong parameters or lack of internet connection 35 alert(`error! ${error message}`); 36 return false; 37 } 38 }; 39	 40 const douserlogout = async function () { 41 try { 42 await parse user logout(); 43 // to verify that current user is now empty, currentasync can be used 44 const currentuser = await parse user current(); 45 if (currentuser === null) { 46 alert('success! no user is logged in anymore!'); 47 } 48 // update state variable holding current user 49 getcurrentuser(); 50 return true; 51 } catch (error) { 52 alert(`error! ${error message}`); 53 return false; 54 } 55 }; 56	 57 // function that will return current user and also update current username 58 const getcurrentuser = async function () { 59 const currentuser = await parse user current(); 60 // update state variable holding current user 61 setcurrentuser(currentuser); 62 return currentuser; 63 }; 64	 65 return ( 66 \<div> 67 \<div classname="header"> 68 \<img 69 classname="header logo" 70 alt="back4app logo" 71 src={ 72 'https //blog back4app com/wp content/uploads/2019/05/back4app white logo 500px png' 73 } 74 /> 75 \<p classname="header text bold">{'react on back4app'}\</p> 76 \<p classname="header text">{'user login'}\</p> 77 \</div> 78 {currentuser === null && ( 79 \<div classname="container"> 80 \<h2 classname="heading">{'user login'}\</h2> 81 \<divider /> 82 \<div classname="form wrapper"> 83 \<input 84 value={username} 85 onchange={(event) => setusername(event target value)} 86 placeholder="username" 87 size="large" 88 classname="form input" 89 /> 90 \<input 91 value={password} 92 onchange={(event) => setpassword(event target value)} 93 placeholder="password" 94 size="large" 95 type="password" 96 classname="form input" 97 /> 98 \</div> 99 \<div classname="form buttons"> 100 \<button 101 onclick={() => douserlogin()} 102 type="primary" 103 classname="form button" 104 color={'#208aec'} 105 size="large" 106 > 107 log in 108 \</button> 109 \</div> 110 \</div> 111 )} 112 {currentuser !== null && ( 113 \<div classname="container"> 114 \<h2 classname="heading">{'user screen'}\</h2> 115 \<divider /> 116 \<h2 classname="heading">{`hello ${currentuser get('username')}!`}\</h2> 117 \<div classname="form buttons"> 118 \<button 119 onclick={() => douserlogout()} 120 type="primary" 121 classname="form button" 122 color={'#208aec'} 123 size="large" 124 > 125 log out 126 \</button> 127 \</div> 128 \</div> 129 )} 130 \</div> 131 ); 132 }; hellouser tsx 1 import react, { usestate, fc, reactelement } from 'react'; 2 import ' /app css'; 3 import { button, divider, input } from 'antd'; 4 const parse = require('parse/dist/parse min js'); 5	 6 export const userlogin fc<{}> = () reactelement => { 7 // state variables 8 const \[username, setusername] = usestate(''); 9 const \[password, setpassword] = usestate(''); 10 const \[currentuser, setcurrentuser] = usestate\<parse object | null>(null); 11	 12 const douserlogin = async function () promise\<boolean> { 13 // note that these values come from state variables that we've declared before 14 const usernamevalue string = username; 15 const passwordvalue string = password; 16 try { 17 const loggedinuser parse user = await parse user login(usernamevalue, passwordvalue); 18 // login returns the corresponding parseuser object 19 alert( 20 `success! user ${loggedinuser get('username')} has successfully signed in!`, 21 ); 22 // to verify that this is in fact the current user, `current` can be used 23 const currentuser parse user = await parse user current(); 24 console log(loggedinuser === currentuser); 25 // clear input fields 26 setusername(''); 27 setpassword(''); 28 // update state variable holding current user 29 getcurrentuser(); 30 return true; 31 } catch (error any) { 32 // error can be caused by wrong parameters or lack of internet connection 33 alert(`error! ${error message}`); 34 return false; 35 } 36 }; 37	 38 const douserlogout = async function () promise\<boolean> { 39 try { 40 await parse user logout(); 41 // to verify that current user is now empty, currentasync can be used 42 const currentuser parse user = await parse user current(); 43 if (currentuser === null) { 44 alert('success! no user is logged in anymore!'); 45 } 46 // update state variable holding current user 47 getcurrentuser(); 48 return true; 49 } catch (error any) { 50 alert(`error! ${error message}`); 51 return false; 52 } 53 }; 54	 55 // function that will return current user and also update current username 56 const getcurrentuser = async function () promise\<parse user | null> { 57 const currentuser (parse user | null) = await parse user current(); 58 // update state variable holding current user 59 setcurrentuser(currentuser); 60 return currentuser; 61 } 62	 63 return ( 64 \<div> 65 \<div classname="header"> 66 \<img 67 classname="header logo" 68 alt="back4app logo" 69 src={ 70 'https //blog back4app com/wp content/uploads/2019/05/back4app white logo 500px png' 71 } 72 /> 73 \<p classname="header text bold">{'react on back4app'}\</p> 74 \<p classname="header text">{'user login'}\</p> 75 \</div> 76 {currentuser === null && 77 (\<div classname="container"> 78 \<h2 classname="heading">{'user login'}\</h2> 79 \<divider /> 80 \<div classname="form wrapper"> 81 \<input 82 value={username} 83 onchange={(event) => setusername(event target value)} 84 placeholder="username" 85 size="large" 86 classname="form input" 87 /> 88 \<input 89 value={password} 90 onchange={(event) => setpassword(event target value)} 91 placeholder="password" 92 size="large" 93 type="password" 94 classname="form input" 95 /> 96 \</div> 97 \<div classname="form buttons"> 98 \<button 99 onclick={() => douserlogin()} 100 type="primary" 101 classname="form button" 102 color={'#208aec'} 103 size="large" 104 > 105 log in 106 \</button> 107 \</div> 108 \</div>) 109 } 110 {currentuser !== null && 111 (\<div classname="container"> 112 \<h2 classname="heading">{'user screen'}\</h2> 113 \<divider /> 114 \<h2 classname="heading">{`hello ${currentuser get('username')}!`}\</h2> 115 \<div classname="form buttons"> 116 \<button 117 onclick={() => douserlogout()} 118 type="primary" 119 classname="form button" 120 color={'#208aec'} 121 size="large" 122 > 123 log out 124 \</button> 125 \</div> 126 \</div>) 127 } 128 \</div> 129 ); 130 }; このコンポーネントでは、 parse user current parse user current メソッドがユーザー名を取得し、コンポーネントのjsx内にレンダリングされる状態変数を更新します。これらのクラスをあなたの app css app css ファイルに追加して、レイアウトスタイルを完全にレンダリングします app css 1 @import ' antd/dist/antd css'; 2	 3 app { 4 text align center; 5 } 6	 7 html { 8 box sizing border box; 9 outline none; 10 overflow auto; 11 } 12	 13 , 14 before, 15 after { 16 margin 0; 17 padding 0; 18 box sizing inherit; 19 } 20	 21 h1, 22 h2, 23 h3, 24 h4, 25 h5, 26 h6 { 27 margin 0; 28 font weight bold; 29 } 30	 31 p { 32 margin 0; 33 } 34	 35 body { 36 margin 0; 37 background color #fff; 38 } 39	 40 container { 41 width 100%; 42 max width 900px; 43 margin auto; 44 padding 20px 0; 45 text align left; 46 } 47	 48 header { 49 align items center; 50 padding 25px 0; 51 background color #208aec; 52 } 53	 54 header logo { 55 height 55px; 56 margin bottom 20px; 57 object fit contain; 58 } 59	 60 header text bold { 61 margin bottom 3px; 62 color rgba(255, 255, 255, 0 9); 63 font size 16px; 64 font weight bold; 65 } 66	 67 header text { 68 color rgba(255, 255, 255, 0 9); 69 font size 15px; 70 } 71	 72 heading { 73 font size 22px; 74 } 75	 76 flex { 77 display flex; 78 } 79	 80 flex between { 81 display flex; 82 justify content space between; 83 } 84	 85 flex child { 86 flex 0 0 45%; 87 } 88	 89 heading button { 90 margin left 12px; 91 } 92	 93 list item { 94 padding bottom 15px; 95 margin bottom 15px; 96 border bottom 1px solid rgba(0,0,0,0 06); 97 text align left; 98 } 99	 100 list item title { 101 color rgba(0,0,0,0 87); 102 font size 17px; 103 } 104	 105 list item description { 106 color rgba(0,0,0,0 5); 107 font size 15px; 108 } 結論このガイドの最後に、reactでローカルストレージから現在のparseユーザーデータを取得する方法を学びました。次のガイドでは、ユーザーがパスワードをリセットできるようにする方法を示します。