Tipi di dati supportati in Parse React: Guida dettagliata

analizzare i tipi di dati in un componente react introduzione nel cuore della funzionalità parse core c'è la gestione degli oggetti dati parse ti consente di memorizzare e interrogare i suoi dati in modo semplice utilizzando i suoi sdk o api (rest o graphql) tutte le funzionalità degli oggetti dati sono costruite utilizzando la parse object parse object classe, i cui campi possono contenere coppie chiave valore di diversi tipi di dati compatibili con json i principali tipi di dati che possono essere assegnati ai campi dell'oggetto sono i seguenti numero numero numeri interi (42) o numeri in virgola mobile (42 5), purché ‘ ’ sia il separatore decimale; booleano booleano valori true o false; stringa stringa una stringa che può essere lunga fino a 2147483647 caratteri fai attenzione che valori così grandi rallenteranno le operazioni sui dati; datatime datatime datatime datatime oggetti memorizzati in formato utc per impostazione predefinita se hai bisogno di utilizzare un altro fuso orario, la conversione deve essere effettuata manualmente; array array un array contenente dati in qualsiasi formato compatibile con parse oggetto un oggetto json che contiene anche dati di parse quando disponibile nell'sdk, una include() include() chiamata porterà i dettagli dalla proprietà object quando scegli di utilizzare il tipo array, ti consigliamo di mantenere gli oggetti array piccoli poiché questo può influenzare le prestazioni complessive delle operazioni sui dati la nostra raccomandazione è di utilizzare il tipo array se non supera i 20 elementi e non cresce nel tempo invece del tipo array, puoi utilizzare i tipi pointer e relations come alternativa in questa guida, imparerai come memorizzare i dati in ciascuno dei tipi di dati di base elencati sopra costruirai un componente di registrazione del prodotto su react, che ti mostrerà come formattare, convertire e salvare i dati nel tuo parse server in react parse offre anche i tipi di dati geopoint geopoint per utilizzare la potenza delle risorse di geolocalizzazione, e i dati relazionali specifici di parse utilizzando i tipi pointer pointer o relation relation vedrai entrambi trattati nelle prossime guide requisiti per completare questo tutorial, avrai bisogno di un'app react creata e connessa a back4app se desideri testare/utilizzare il layout dello schermo fornito da questa guida, dovresti impostare la ant design ant design libreria obiettivo comprendere i tipi di dati di base compatibili con parse e memorizzare ciascun tipo di dato su parse da un componente react 1 il componente di creazione del prodotto iniziamo a creare la struttura del componente rendiamolo semplice e creiamo una schermata di modulo con un campo di testo per ciascun tipo di dato, una casella di controllo e un pulsante di invio per salvare l'oggetto questi input raccoglieranno i tuoi prodotto prodotto valori dei campi nome ( stringa stringa ), quantità ( numero numero ), prezzo ( numero numero ), disponibile ( booleano booleano ), data di scadenza ( dataora dataora ), e categorie( array array ) inoltre, salverai un campo di tipo oggetto oggetto nel tuo metodo di salvataggio, ma questo non avrà bisogno di un campo di input crea un componente separato in un file chiamato productcreation js/productcreation tsx productcreation js/productcreation tsx includendo il seguente codice, o aggiungilo al tuo file principale dell'applicazione ( app js/app tsx app js/app tsx ) puoi utilizzare questo layout con stili completi utilizzando ant design ant design e aggiungendo il codice css al tuo app css app css file o impostando il tuo modulo personalizzato productcreation js 1 import react, { usestate } from 'react'; 2 import parse from 'parse/dist/parse min js'; 3 import ' /app css'; 4 import { button, checkbox, input } from 'antd'; 5 import { plusoutlined } from '@ant design/icons'; 6 7 export const productcreation = () => { 8 // state variables 9 const \[productname, setproductname] = usestate(''); 10 const \[productquantity, setproductquantity] = usestate(''); 11 const \[productprice, setproductprice] = usestate(''); 12 const \[productavailable, setproductavailable] = usestate(false); 13 const \[productexpirationdate, setproductexpirationdate] = usestate(''); 14 const \[productcategories, setproductcategories] = usestate(''); 15 16 return ( 17 \<div> 18 \<div classname="header"> 19 \<img 20 classname="header logo" 21 alt="back4app logo" 22 src={ 23 'https //blog back4app com/wp content/uploads/2019/05/back4app white logo 500px png' 24 } 25 /> 26 \<p classname="header text bold">{'react on back4app'}\</p> 27 \<p classname="header text">{'product creation'}\</p> 28 \</div> 29 \<div classname="container"> 30 {/ product field inputs /} 31 \<div classname="flex between"> 32 \<h2 classname="list heading">available?\</h2> 33 \<checkbox 34 onchange={(e) => setproductavailable(e target checked)} 35 >\</checkbox> 36 \</div> 37 \<div classname="form wrapper"> 38 \<input 39 classname="form input" 40 value={productname} 41 onchange={(event) => setproductname(event target value)} 42 placeholder="name" 43 size="large" 44 /> 45 \<input 46 classname="form input" 47 value={productquantity} 48 onchange={(event) => setproductquantity(event target value)} 49 placeholder="quantity" 50 size="large" 51 /> 52 \<input 53 classname="form input" 54 value={productprice} 55 onchange={(event) => setproductprice(event target value)} 56 placeholder="price" 57 size="large" 58 /> 59 \<input 60 classname="form input" 61 value={productexpirationdate} 62 onchange={(event) => setproductexpirationdate(event target value)} 63 placeholder="expiration date (mm/dd/yyyy)" 64 size="large" 65 /> 66 \<input 67 classname="form input" 68 value={productcategories} 69 onchange={(event) => setproductcategories(event target value)} 70 placeholder="categories (separated by comma)" 71 size="large" 72 /> 73 {/ add product button /} 74 \<button 75 type="primary" 76 classname="form button" 77 color={'#208aec'} 78 size={'large'} 79 onclick={createproduct} 80 icon={\<plusoutlined />} 81 > 82 create product 83 \</button> 84 \</div> 85 \</div> 86 \</div> 87 ); 88 }; productcreation tsx 1 import react, { usestate, fc, reactelement } from 'react'; 2 import ' /app css'; 3 import { button, checkbox, input } from 'antd'; 4 import { plusoutlined } from '@ant design/icons'; 5 const parse = require('parse/dist/parse min js'); 6 7 export const productcreation fc<{}> = () reactelement => { 8 // state variables 9 const \[productname, setproductname] = usestate(''); 10 const \[productquantity, setproductquantity] = usestate(''); 11 const \[productprice, setproductprice] = usestate(''); 12 const \[productavailable, setproductavailable] = usestate(false); 13 const \[productexpirationdate, setproductexpirationdate] = usestate(''); 14 const \[productcategories, setproductcategories] = usestate(''); 15 16 const createproduct = async function () promise\<boolean> { 17 try { 18 // these values come from state variables 19 // convert data values to corresponding data types 20 const productnamevalue string = productname; 21 const productquantityvalue number = number(productquantity); 22 const productpricevalue number = number(productprice); 23 const productavailablevalue boolean = productavailable; 24 const productexpirationdatevalue date = new date(productexpirationdate); 25 const productcategoriesvalue string\[] = productcategories split(','); 26 27 // creates a new product parse object instance 28 let product parse object = new parse object('product'); 29 30 // set data to parse object 31 product set('name', productnamevalue); 32 product set('quantity', productquantityvalue); 33 product set('price', productpricevalue); 34 product set('available', productavailablevalue); 35 product set('expirationdate', productexpirationdatevalue); 36 product set('categories', productcategoriesvalue); 37 product set('completedata', { 38 name productnamevalue, 39 quantity productquantityvalue, 40 price productpricevalue, 41 available productavailablevalue, 42 expirationdate productexpirationdatevalue, 43 categories productcategoriesvalue, 44 }); 45 46 // after setting the values, save it on the server 47 try { 48 let savedproduct parse object = await product save(); 49 // success 50 alert(`success! ${json stringify(savedproduct)}`); 51 return true; 52 } catch (error) { 53 // error can be caused by lack of internet connection 54 alert(`error! ${error message}`); 55 return false; 56 } 57 } catch (error any) { 58 // error can be caused by wrong type of values in fields 59 alert(`error! ${error message}`); 60 return false; 61 } 62 }; 63 64 return ( 65 \<div> 66 \<div classname="header"> 67 \<img 68 classname="header logo" 69 alt="back4app logo" 70 src={ 71 'https //blog back4app com/wp content/uploads/2019/05/back4app white logo 500px png' 72 } 73 /> 74 \<p classname="header text bold">{'react on back4app'}\</p> 75 \<p classname="header text">{'product creation'}\</p> 76 \</div> 77 \<div classname="container"> 78 {/ product field inputs /} 79 \<div classname="flex between"> 80 \<h2 classname="list heading">available?\</h2> 81 \<checkbox 82 onchange={(e) => setproductavailable(e target checked)} 83 >\</checkbox> 84 \</div> 85 \<div classname="form wrapper"> 86 \<input 87 classname="form input" 88 value={productname} 89 onchange={(event) => setproductname(event target value)} 90 placeholder="name" 91 size="large" 92 /> 93 \<input 94 classname="form input" 95 value={productquantity} 96 onchange={(event) => setproductquantity(event target value)} 97 placeholder="quantity" 98 size="large" 99 /> 100 \<input 101 classname="form input" 102 value={productprice} 103 onchange={(event) => setproductprice(event target value)} 104 placeholder="price" 105 size="large" 106 /> 107 \<input 108 classname="form input" 109 value={productexpirationdate} 110 onchange={(event) => setproductexpirationdate(event target value)} 111 placeholder="expiration date (mm/dd/yyyy)" 112 size="large" 113 /> 114 \<input 115 classname="form input" 116 value={productcategories} 117 onchange={(event) => setproductcategories(event target value)} 118 placeholder="categories (separated by comma)" 119 size="large" 120 /> 121 {/ add product button /} 122 \<button 123 type="primary" 124 classname="form button" 125 color={'#208aec'} 126 size={'large'} 127 onclick={createproduct} 128 icon={\<plusoutlined />} 129 > 130 create product 131 \</button> 132 \</div> 133 \</div> 134 \</div> 135 ); 136 }; 1 html { 2 box sizing border box; 3 outline none; 4 overflow auto; 5 } 6 7 , 8 before, 9 after { 10 margin 0; 11 padding 0; 12 box sizing inherit; 13 } 14 15 h1, 16 h2, 17 h3, 18 h4, 19 h5, 20 h6 { 21 margin 0; 22 } 23 24 p { 25 margin 0; 26 } 27 28 body { 29 margin 0; 30 background color #fff; 31 } 32 33 container { 34 width 100%; 35 max width 600px; 36 margin auto; 37 padding 20px 0; 38 } 39 40 header { 41 align items center; 42 padding 25px 0; 43 background color #208aec; 44 } 45 46 header logo { 47 height 55px; 48 margin bottom 20px; 49 object fit contain; 50 } 51 52 header text bold { 53 margin bottom 3px; 54 color rgba(255, 255, 255, 0 9); 55 font size 16px; 56 font weight bold; 57 } 58 59 header text { 60 color rgba(255, 255, 255, 0 9); 61 font size 15px; 62 } 63 64 flex between { 65 display flex; 66 align items center; 67 justify content space between; 68 } 69 70 list heading { 71 font weight bold; 72 } 73 74 form wrapper { 75 margin top 20px; 76 margin bottom 10px; 77 } 78 79 form input { 80 margin bottom 20px; 81 } 82 83 form button { 84 width 100%; 85 } dopo aver impostato questo schermo, la tua applicazione dovrebbe apparire così nota che ogni prodotto prodotto ha il proprio campo di input di testo, tranne per l'input della casella di controllo booleano, il che significa che i dati in essi devono essere convertiti nel corrispondente tipo di dato prima di essere salvati 2 conversione dei dati di input prima di salvare i tuoi dati in parse object parse object , devi formattare correttamente il numero numero , dataora dataora , e array array input creiamo ora una funzione di salvataggio, che recupererà i dati dalle tue variabili di stato e applicherà la conversione dei dati appropriata productcreation js 1 const createproduct = async function () { 2 try { 3 // these values come from state variables 4 // convert data values to corresponding data types 5 const productnamevalue = productname; 6 const productquantityvalue = number(productquantity); 7 const productpricevalue = number(productprice); 8 const productavailablevalue = productavailable; 9 const productexpirationdatevalue = new date(productexpirationdate); 10 const productcategoriesvalue = productcategories split(','); 11 } catch (error) { 12 // error can be caused by wrong type of values in fields 13 alert(`error! ${error message}`); 14 return false; 15 } 16 }; productcreation tsx 1 const createproduct = async function () promise\<boolean> { 2 try { 3 // these values come from state variables 4 // convert data values to corresponding data types 5 const productnamevalue string = productname; 6 const productquantityvalue number = number(productquantity); 7 const productpricevalue number = number(productprice); 8 const productavailablevalue boolean = productavailable; 9 const productexpirationdatevalue date = new date(productexpirationdate); 10 const productcategoriesvalue string\[] = productcategories split(','); 11 } catch (error any) { 12 // error can be caused by wrong type of values in fields 13 alert(`error! ${error message}`); 14 return false; 15 } 16 }; il numero numero la conversione dei dati viene effettuata convertendo il valore come un numero numero oggetto javascript dataora dataora viene convertito utilizzando il data data costruttore dell'oggetto javascript; il array array viene creato utilizzando il string split string split metodo in javascript, creando un array contenente ogni voce del campo categorie separata da virgole nota che i tuoi dati sono ora contenuti all'interno di un singolo oggetto, che può essere impostato in un nuovo p arse object arse object istanza da salvare sul server utilizzando il parse object set() parse object set() metodo, che prende due argomenti il nome del campo e il valore da impostare impostiamo anche un nuovo campo chiamato completedata completedata , che sarà il tuo oggetto oggetto campo tipo, assegnando lo stesso oggetto dati ad esso vai avanti e completa la createproduct createproduct funzione con quanto segue productcreation js 1 const createproduct = async function () { 2 try { 3 // these values come from state variables 4 // convert data values to corresponding data types 5 const productnamevalue = productname; 6 const productquantityvalue = number(productquantity); 7 const productpricevalue = number(productprice); 8 const productavailablevalue = productavailable; 9 const productexpirationdatevalue = new date(productexpirationdate); 10 const productcategoriesvalue = productcategories split(','); 11 12 // creates a new product parse object instance 13 let product = new parse object('product'); 14 15 // set data to parse object 16 product set('name', productnamevalue); 17 product set('quantity', productquantityvalue); 18 product set('price', productpricevalue); 19 product set('available', productavailablevalue); 20 product set('expirationdate', productexpirationdatevalue); 21 product set('categories', productcategoriesvalue); 22 product set('completedata', { 23 name productnamevalue, 24 quantity productquantityvalue, 25 price productpricevalue, 26 available productavailablevalue, 27 expirationdate productexpirationdatevalue, 28 categories productcategoriesvalue, 29 }); 30 31 // after setting the values, save it on the server 32 try { 33 let savedproduct = await product save(); 34 // success 35 alert(`success! ${json stringify(savedproduct)}`); 36 return true; 37 } catch (error) { 38 // error can be caused by lack of internet connection 39 alert(`error! ${error message}`); 40 return false; 41 } 42 } catch (error) { 43 // error can be caused by wrong type of values in fields 44 alert(`error! ${error message}`); 45 return false; 46 } 47 }; productcreation tsx 1 const createproduct = async function () promise\<boolean> { 2 try { 3 // these values come from state variables 4 // convert data values to corresponding data types 5 const productnamevalue string = productname; 6 const productquantityvalue number = number(productquantity); 7 const productpricevalue number = number(productprice); 8 const productavailablevalue boolean = productavailable; 9 const productexpirationdatevalue date = new date(productexpirationdate); 10 const productcategoriesvalue string\[] = productcategories split(','); 11 12 // creates a new product parse object instance 13 let product parse object = new parse object('product'); 14 15 // set data to parse object 16 product set('name', productnamevalue); 17 product set('quantity', productquantityvalue); 18 product set('price', productpricevalue); 19 product set('available', productavailablevalue); 20 product set('expirationdate', productexpirationdatevalue); 21 product set('categories', productcategoriesvalue); 22 product set('completedata', { 23 name productnamevalue, 24 quantity productquantityvalue, 25 price productpricevalue, 26 available productavailablevalue, 27 expirationdate productexpirationdatevalue, 28 categories productcategoriesvalue, 29 }); 30 31 // after setting the values, save it on the server 32 try { 33 let savedproduct parse object = await product save(); 34 // success 35 alert(`success! ${json stringify(savedproduct)}`); 36 return true; 37 } catch (error any) { 38 // error can be caused by lack of internet connection 39 alert(`error! ${error message}`); 40 return false; 41 }; 42 } catch (error any) { 43 // error can be caused by wrong type of values in fields 44 alert(`error! ${error message}`); 45 return false; 46 } 47 }; ora puoi testare il componente, inserendo la createproduct createproduct funzione al suo interno e chiamandola all'interno del pulsante di invio del tuo modulo onclick onclick dopo aver creato un prodotto, dovresti vedere un avviso contenente i suoi dati come questo per certificare che i tuoi dati siano stati salvati sul server utilizzando i tipi di dati corretti, puoi guardare il tuo dashboard di parse clicca sulla tabella dati del prodotto tabella dati del prodotto e nota che ogni colonna ha il suo tipo di dato scritto nell'intestazione la tua classe dovrebbe apparire così conclusione alla fine di questa guida, hai imparato come salvare ciascuno dei tipi di dati di base disponibili su parse utilizzando un componente react nella prossima guida, imparerai a conoscere i dati relazionali su parse