Ottieni e gestisci l'utente corrente in React con Parse

ottieni l'utente corrente per react introduzione dopo aver implementato la registrazione e il login dell'utente, è necessario recuperare i dati dell'utente attualmente connesso per eseguire diverse azioni e richieste questi dati possono essere recuperati rapidamente utilizzando parse user current parse user current all'interno dei componenti della tua app prerequisiti per completare questo tutorial, avrai bisogno di un'app react creata e collegata a back4app completa la guida precedente in modo da avere una migliore comprensione di la classe parse user e il metodo parse user login https //www back4app com/docs/react/working with users/react user login se desideri testare/utilizzare il layout della schermata fornito da questa guida, dovresti configurare la ant design ant design libreria obiettivo ottieni i dati dell'utente corrente recuperandoli utilizzando parse per un'app react 1 recupero dell'utente corrente il metodo parse user current parse user current può essere utilizzato ovunque nel tuo codice, dopo aver configurato correttamente la tua app per utilizzare parse la sua risposta sarà l'oggetto del tuo utente corrente ( parse user parse user ) o null se non c'è attualmente un utente connesso 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 }; questo metodo è essenziale in situazioni in cui non hai accesso allo stato della tua applicazione o ai dati dell'utente, rendendo possibile eseguire richieste parse pertinenti in qualsiasi componente della tua app 2 utilizzare l'utente corrente in un componente react nelle nostre guide precedenti, il parse user current parse user current metodo è stato già utilizzato per testare la visualizzazione del nome utente attuale nella guida di accesso utente ecco il userlogin userlogin codice del componente, dai un'occhiata più da vicino alla getcurrentuser getcurrentuser funzione 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 }; in questo componente, il parse user current parse user current metodo recupera il nome utente e aggiorna la variabile di stato che viene renderizzata all'interno del jsx del componente aggiungi queste classi al tuo app css app css file per rendere completamente gli stili del layout 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 } conclusione alla fine di questa guida, hai imparato come recuperare i dati dell'utente corrente di parse dalla memoria locale su react nella prossima guida, ti mostreremo come consentire al tuo utente di reimpostare la propria password