1 00:00:02,060 --> 00:00:06,950 Premendo il pulsante di dettaglio qui negli articoli dell'ordine dovresti esporre tutti gli articoli che abbiamo e per questo, 2 00:00:06,950 --> 00:00:08,810 voglio usare l'articolo del carrello qui. 3 00:00:08,840 --> 00:00:14,150 Un modo per farlo è quello di gestire alcuni stati interni qui con l'aiuto dell'hook degli stati d'uso che importiamo da 4 00:00:14,150 --> 00:00:20,000 React, dove controlliamo se stiamo attualmente visualizzando i dettagli o meno. Quindi nominerò i dettagli di questo show e 5 00:00:20,120 --> 00:00:22,730 imposterò qui i dettagli dello show 6 00:00:24,300 --> 00:00:29,680 e lo inizializzerò con use state su false in modo che non mostriamo i dettagli inizialmente 7 00:00:30,000 --> 00:00:38,190 e ora quando premiamo questo pulsante qui, ovviamente voglio cambiare questo stato. Quindi, in questa funzione, chiamerò set show details e fondamentalmente invertiremo 8 00:00:38,200 --> 00:00:43,690 il valore, per questo usiamo la sintassi speciale dove passiamo una funzione a quella funzione 9 00:00:43,690 --> 00:00:51,370 di impostazione dello stato qui, dove otteniamo lo stato precedente e quindi restituiamo un nuovo stato basato su quello stato precedente 10 00:00:51,370 --> 00:00:53,610 e qui, tieni presente che 11 00:00:53,680 --> 00:00:59,290 lo stato precedente è effettivamente falso o vero a seconda di quali dettagli dello show 12 00:00:59,290 --> 00:01:05,320 erano, quindi qui non restituirò lo stato precedente per convertirlo, se fosse falso, tornerò vero come nuovo 13 00:01:05,320 --> 00:01:11,200 stato, se fosse vero, restituirò falso come nuovo stato e imposterò questo per mostrare i dettagli. 14 00:01:11,200 --> 00:01:18,130 Ora possiamo usare queste informazioni qui per produrre alcuni contenuti in modo condizionale. Possiamo controllare i dettagli dello show e se questo è vero 15 00:01:18,730 --> 00:01:22,930 e questa è ora la nostra sintassi React che possiamo usare qui, quindi 16 00:01:22,930 --> 00:01:29,200 se questo è vero, allora restituiamo questa vista qui. All'inizio potrebbe sembrare strano ma con ciò stiamo dicendo se questo 17 00:01:29,200 --> 00:01:34,340 è vero e questo è vero e questa è una scorciatoia per Javascript per verificare se questo è vero, 18 00:01:34,480 --> 00:01:38,380 beh, questo è sempre vero perché alla fine è un oggetto quindi questo verrà quindi 19 00:01:38,380 --> 00:01:39,830 reso, ecco come funziona Javascript. 20 00:01:39,850 --> 00:01:45,430 L'alternativa sarebbe un'espressione ternaria o una variabile che si imposta qui che si modifica con un 21 00:01:45,430 --> 00:01:47,920 controllo if e quindi l'output lì. 22 00:01:47,920 --> 00:01:53,500 Quindi userò questa espressione in linea qui in cui ho generato questa vista se mostra i dettagli 23 00:01:53,560 --> 00:01:57,400 è vero e in questa vista, voglio produrre tutti gli elementi. 24 00:01:57,490 --> 00:02:02,650 Quindi, in questa vista, avrò un output dinamico in cui passerò attraverso tutti i miei articoli che 25 00:02:02,650 --> 00:02:05,920 mi aspetto di ottenere sugli oggetti prop di questo componente 26 00:02:05,920 --> 00:02:12,400 dell'articolo di ordine e lì, possiamo mappare i nostri dati in un elenco di elementi jsx, in un elenco dei componenti. 27 00:02:13,150 --> 00:02:21,640 Quindi qui, ovviamente, ottengo il mio articolo del carrello alla fine perché gli articoli in un ordine sono solo gli articoli che avevamo nel carrello, quindi la mappa 28 00:02:21,640 --> 00:02:27,610 esegue questa funzione su ogni articolo del carrello per così dire e ci dà quell'articolo del carrello che è attualmente 29 00:02:27,610 --> 00:02:33,190 alla ricerca e ora per questo articolo, dobbiamo restituire un nuovo elemento jsx che vogliamo produrre ed è 30 00:02:33,190 --> 00:02:35,810 qui che uso il mio carrello per farlo. 31 00:02:35,860 --> 00:02:45,490 Quindi qui, ho prodotto articoli del carrello come, non carrello ma articoli del carrello come questo. Ora l'articolo del carrello, se hai dato un'occhiata, ha 32 00:02:45,530 --> 00:02:51,920 preso la quantità e il titolo come input e voleva anche l'importo. 33 00:02:51,920 --> 00:02:57,050 Inoltre, abbiamo avuto il pulsante Elimina lì che non voglio sull'articolo dell'ordine, quindi dobbiamo fare 34 00:02:57,050 --> 00:02:57,970 qualcosa al 35 00:02:58,250 --> 00:03:04,610 riguardo, ma concentriamoci su quantità, titolo e quantità per il momento e passiamo in questi pezzi di dati. 36 00:03:04,610 --> 00:03:13,810 Quindi qui la quantità è cartItem. quantità, quantità è cartItem. 37 00:03:13,820 --> 00:03:20,810 e ora ricorda che qualunque cosa immagazziniamo qui negli ordini, negli articoli è alla fine ciò che otteniamo come articoli qui 38 00:03:20,810 --> 00:03:22,550 nel nostro riduttore di 39 00:03:22,550 --> 00:03:27,430 ordini, quindi ciò che otteniamo nella nostra azione. Quindi otteniamo i nostri articoli del carrello lì 40 00:03:27,430 --> 00:03:33,950 e se diamo un'occhiata alla schermata del carrello e diamo un'occhiata a ciò che passiamo lì, quindi per aggiungere l'ordine, passiamo in questi articoli del 41 00:03:33,950 --> 00:03:36,970 carrello costanti che contengono questo array che generiamo qui alla fine . 42 00:03:37,010 --> 00:03:39,970 Quindi, alla fine, abbiamo una serie di oggetti simili, quindi abbiamo 43 00:03:40,010 --> 00:03:45,110 il titolo del prodotto, il prezzo del prodotto, la quantità e la somma lì dentro ed è quello con cui 44 00:03:45,110 --> 00:03:52,970 ora possiamo lavorare qui nell'ordine in cui creo il mio carrello articoli, passo nel carrelloItem. quantità, per l'importo, passo 45 00:03:52,970 --> 00:03:59,850 in cartItem. somma e ultimo ma non meno importante 46 00:03:59,860 --> 00:04:08,810 nell'articolo carrello, abbiamo anche bisogno del titolo, quindi sarà cartItem. productTitle quello che passo qui. 47 00:04:10,420 --> 00:04:16,130 Ora il problema rimanente, come ho detto, è che un articolo carrello ha questa icona toccabile qui per 48 00:04:16,130 --> 00:04:20,680 eliminarlo, questo ha senso solo se usiamo questo componente all'interno di un carrello, non 49 00:04:20,690 --> 00:04:25,890 quando lo usiamo all'interno di un ordine che vogliamo produrre che è ovviamente di sola lettura. 50 00:04:26,030 --> 00:04:34,430 Quindi la soluzione è che qui nell'articolo del carrello, avvolgiamo questo e ci aspettiamo semplicemente di ottenere un sostegno che dice ad 51 00:04:34,430 --> 00:04:37,990 esempio eliminabile e solo se è vero, stesso collegamento 52 00:04:38,000 --> 00:04:41,780 di un secondo fa, produciamo questa opacità tangibile, quindi questa 53 00:04:41,810 --> 00:04:43,130 icona in 54 00:04:43,220 --> 00:04:45,060 generale, altrimenti non lo facciamo. 55 00:04:45,080 --> 00:04:51,150 Quindi ora abbiamo questo oggetto cancellabile nell'elemento carrello che deve essere impostato per mostrare l'icona del cestino. 56 00:04:51,170 --> 00:04:57,260 Ciò significa che nella schermata del carrello in cui vogliamo avere l'icona del cestino, quando utilizziamo l'elemento 57 00:04:57,620 --> 00:05:01,790 del carrello lì, dobbiamo impostare l'eliminazione e impostarla in questo modo, questo 58 00:05:01,790 --> 00:05:07,280 lo imposta su vero e lo mostreremo. D'altra parte, nel nostro articolo di ordine in 59 00:05:07,430 --> 00:05:12,830 cui utilizzo anche l'articolo del carrello, non imposto la cancellazione e quindi non eseguiremo il rendering 60 00:05:12,830 --> 00:05:16,530 di questa icona cestino. Quindi diamo un'occhiata a 61 00:05:16,530 --> 00:05:20,550 questo, salviamolo e aggiungiamo questi articoli al carrello, premiamo l'ordine 62 00:05:20,550 --> 00:05:27,760 ora e poi andiamo agli ordini, fai clic su mostra dettagli e ricevo un errore, la mappa degli oggetti 63 00:05:27,780 --> 00:05:32,310 di scena non può essere chiamata perché non definito non un oggetto. 64 00:05:32,500 --> 00:05:37,800 Una ragione di ciò è che sto cercando di scorrere tutti i miei articoli qui nell'ordine ma 65 00:05:37,860 --> 00:05:41,640 nella schermata degli ordini, non sto mai impostando gli oggetti qui. 66 00:05:41,640 --> 00:05:47,280 Quindi nella schermata degli ordini per l'articolo dell'ordine, oltre a passare l'importo e la data, dobbiamo anche 67 00:05:47,280 --> 00:05:53,460 passare gli articoli per l'articolo dell'ordine che stiamo trasmettendo e che, naturalmente, possono essere ricevuti o ricavati dal 68 00:05:53,550 --> 00:05:56,350 nostro articolo Data. articolo che è un singolo ordine 69 00:05:56,350 --> 00:06:05,930 e ora se diamo un'occhiata al modello di ordine, qui avremo questa proprietà degli articoli. Quindi possiamo accedere. 70 00:06:06,040 --> 00:06:10,570 articoli qui e ora passiamo gli articoli nell'ordine e quindi ora possiamo anche emetterli lì. 71 00:06:10,570 --> 00:06:17,720 Quindi ora se ci provi di nuovo e facciamo un nuovo ordine qui e semplicemente diamo un'occhiata a questo, ora 72 00:06:17,740 --> 00:06:22,540 funziona, abbiamo un problema con la chiave qui che ripareremo in un secondo. 73 00:06:22,540 --> 00:06:27,020 Prima di tutto proviamo anche questo su Android, fai clic su ordina ora, quindi vai agli 74 00:06:27,310 --> 00:06:33,220 ordini, mostra i dettagli, ricevi lo stesso avviso ma ho scritto che generalmente funziona, anche se sarebbe bello se questi articoli 75 00:06:33,220 --> 00:06:40,410 fossero un po 'più ampi quindi è anche qualcosa che voglio correggere. Quindi, per correggere questi errori che abbiamo, l'avvertimento deriva 76 00:06:40,410 --> 00:06:41,430 dal fatto 77 00:06:41,430 --> 00:06:48,840 che qui sto mappando i miei dati nei componenti di React e se lo facciamo manualmente con la mappa 78 00:06:48,840 --> 00:06:55,230 qui, dobbiamo assegnare quel prop chiave, questo è un requisito fondamentale di React che tu avremo 79 00:06:55,230 --> 00:06:57,840 in React anche per il web. 80 00:06:57,840 --> 00:07:05,100 Quindi qui, devi puntare a un identificatore univoco e ogni articolo del carrello qui alla fine ha un ID 81 00:07:05,100 --> 00:07:10,950 prodotto che possiamo usare e puoi confermarlo nella schermata del carrello dove crei quella matrice 82 00:07:10,950 --> 00:07:12,030 di articoli 83 00:07:12,030 --> 00:07:18,350 del carrello alla fine, lì memorizziamo quell'ID prodotto e sarà univoco per riga, quindi va bene. 84 00:07:18,390 --> 00:07:28,740 Ora per quanto riguarda la larghezza di questo, possiamo aggiungere uno stile qui, dettagli elementi per esempio e aggiungerlo laggiù nel foglio di 85 00:07:28,740 --> 00:07:30,400 stile e qui, 86 00:07:30,470 --> 00:07:35,370 semplicemente assicurati di impostare una larghezza del 100% in modo da 87 00:07:35,580 --> 00:07:43,820 prendere l'intera larghezza disponibile per il articoli nel carrello. E ora se ci proviamo di nuovo e lo ordiniamo e poi andiamo alla 88 00:07:43,880 --> 00:07:45,450 schermata dei nostri ordini e 89 00:07:45,470 --> 00:07:50,630 mostriamo i dettagli, ora questo sembra il modo in cui dovrebbe apparire e ora possiamo visualizzare i dettagli 90 00:07:50,630 --> 00:07:52,840 e nasconderli, un piccolo miglioramento forse è 91 00:07:52,880 --> 00:07:57,800 che questo il testo dovrebbe aggiornarsi, quindi quando visualizziamo i dettagli, questo dovrebbe dire nascondere i 92 00:07:57,800 --> 00:08:02,950 dettagli e non mostrare i dettagli e, naturalmente, è anche facile da implementare negli articoli dell'ordine, lì abbiamo 93 00:08:03,020 --> 00:08:09,230 questo pulsante, dobbiamo solo impostare questo testo in modo dinamico e controllare se mostra i dettagli che sono il nostro stato 94 00:08:09,230 --> 00:08:10,610 interno qui sono veri. 95 00:08:10,610 --> 00:08:19,620 In tal caso, qui voglio dire nascondere i dettagli, altrimenti dirò mostra i dettagli e ora questo testo 96 00:08:19,620 --> 00:08:25,010 dovrebbe cambiare dinamicamente mentre mostriamo o nascondiamo i nostri dettagli. 97 00:08:25,070 --> 00:08:28,400 Quindi, se lo ordiniamo per l'ultima volta qui, diamo un'occhiata a 98 00:08:28,400 --> 00:08:31,170 questo, ora è mostra i dettagli, ora nasconde 99 00:08:31,280 --> 00:08:34,700 i dettagli, quindi ora funziona davvero nel modo in cui dovrebbe funzionare. 100 00:08:34,710 --> 00:08:41,630 Ora facciamo anche un altro ordine, solo per confermare che funziona davvero. Se lo ordiniamo qui, andiamo alla 101 00:08:41,630 --> 00:08:48,000 schermata degli ordini, ora vedi anche quel secondo ordine e puoi controllarli indipendentemente. 102 00:08:48,080 --> 00:08:53,540 Quindi questa è la schermata degli ordini e come possiamo emettere ordini lì e come possiamo anche riutilizzare l'articolo del carrello qui.