React Native
...
Users
ดึงข้อมูลผู้ใช้ปัจจุบันใน Parse สำหรับ React Native
6 นาที
รับข้อมูลผู้ใช้ปัจจุบันสำหรับ react native บทนำ หลังจากที่คุณได้ทำการลงทะเบียนผู้ใช้และเข้าสู่ระบบแล้ว คุณจำเป็นต้องดึงข้อมูลผู้ใช้ที่เข้าสู่ระบบอยู่ในขณะนี้เพื่อทำการดำเนินการและคำขอต่างๆ เนื่องจาก react native ใช้ asyncstorage asyncstorage เป็นที่เก็บข้อมูลในเครื่อง ข้อมูลนี้สามารถดึงมาใช้ได้โดยใช้ parse currentasync parse currentasync ภายในคอมโพเนนต์ของแอปของคุณ ข้อกำหนดเบื้องต้น ในการทำตามบทเรียนนี้ คุณจะต้องมี แอป react native ที่สร้างขึ้นและ เชื่อมต่อกับ back4app ทำตามคู่มือก่อนหน้านี้เพื่อให้คุณมีความเข้าใจที่ดีขึ้นเกี่ยวกับ คลาสผู้ใช้ของ parse เป้าหมาย ดึงข้อมูลผู้ใช้ปัจจุบันโดยใช้ parse สำหรับแอป react native 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 ของคอมโพเนนต์ บทสรุป ในตอนท้ายของคู่มือนี้, คุณได้เรียนรู้วิธีการดึงข้อมูลผู้ใช้ปัจจุบันจาก parse จากที่เก็บข้อมูลในเครื่องบน react native ในคู่มือถัดไป, เราจะแสดงให้คุณเห็นวิธีการให้ผู้ใช้ของคุณรีเซ็ตรหัสผ่านของเขา