วิธีการดึงผู้ใช้ Parse ปัจจุบันใน React แอปพลิเคชัน

รับข้อมูลผู้ใช้ปัจจุบันสำหรับ react บทนำ หลังจากที่คุณได้ทำการลงทะเบียนผู้ใช้และเข้าสู่ระบบแล้ว คุณจำเป็นต้องดึงข้อมูลผู้ใช้ที่เข้าสู่ระบบอยู่ในขณะนี้เพื่อทำการดำเนินการและคำขอต่างๆ ข้อมูลนี้สามารถดึงได้อย่างรวดเร็วโดยการใช้ parse user current parse user current ภายในคอมโพเนนต์ของแอปของคุณ ข้อกำหนดเบื้องต้น เพื่อให้เสร็จสิ้นการสอนนี้ คุณจะต้องมี แอป react ที่สร้างขึ้นและ https //www back4app com/docs/react/quickstart ทำตามคำแนะนำก่อนหน้านี้เพื่อให้คุณเข้าใจ https //www back4app com/docs/react/working with users/react user login หากคุณต้องการทดสอบ/ใช้เลย์เอาต์หน้าจอที่ให้ไว้ในคำแนะนำนี้ คุณควรตั้งค่า https //ant design/docs/react/introduce เป้าหมาย ดึงข้อมูลผู้ใช้ปัจจุบันโดยใช้ parse สำหรับแอป react 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&#x9; 6 export const userlogin = () => { 7 // state variables 8 const \[username, setusername] = usestate(''); 9 const \[password, setpassword] = usestate(''); 10 const \[currentuser, setcurrentuser] = usestate(null); 11&#x9; 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&#x9; 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&#x9; 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&#x9; 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&#x9; 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&#x9; 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&#x9; 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&#x9; 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&#x9; 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&#x9; 3 app { 4 text align center; 5 } 6&#x9; 7 html { 8 box sizing border box; 9 outline none; 10 overflow auto; 11 } 12&#x9; 13 , 14 before, 15 after { 16 margin 0; 17 padding 0; 18 box sizing inherit; 19 } 20&#x9; 21 h1, 22 h2, 23 h3, 24 h4, 25 h5, 26 h6 { 27 margin 0; 28 font weight bold; 29 } 30&#x9; 31 p { 32 margin 0; 33 } 34&#x9; 35 body { 36 margin 0; 37 background color #fff; 38 } 39&#x9; 40 container { 41 width 100%; 42 max width 900px; 43 margin auto; 44 padding 20px 0; 45 text align left; 46 } 47&#x9; 48 header { 49 align items center; 50 padding 25px 0; 51 background color #208aec; 52 } 53&#x9; 54 header logo { 55 height 55px; 56 margin bottom 20px; 57 object fit contain; 58 } 59&#x9; 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&#x9; 67 header text { 68 color rgba(255, 255, 255, 0 9); 69 font size 15px; 70 } 71&#x9; 72 heading { 73 font size 22px; 74 } 75&#x9; 76 flex { 77 display flex; 78 } 79&#x9; 80 flex between { 81 display flex; 82 justify content space between; 83 } 84&#x9; 85 flex child { 86 flex 0 0 45%; 87 } 88&#x9; 89 heading button { 90 margin left 12px; 91 } 92&#x9; 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&#x9; 100 list item title { 101 color rgba(0,0,0,0 87); 102 font size 17px; 103 } 104&#x9; 105 list item description { 106 color rgba(0,0,0,0 5); 107 font size 15px; 108 } บทสรุป ในตอนท้ายของคู่มือนี้ คุณได้เรียนรู้วิธีการดึงข้อมูลผู้ใช้ parse ปัจจุบันจากที่เก็บข้อมูลในเครื่องบน react ในคู่มือต่อไป เราจะแสดงให้คุณเห็นวิธีการให้ผู้ใช้ของคุณรีเซ็ตรหัสผ่านของเขา