Premendo il pulsante di dettaglio qui negli articoli dell'ordine dovresti esporre tutti gli articoli che abbiamo e per questo,
voglio usare l'articolo del carrello qui.
Un modo per farlo è quello di gestire alcuni stati interni qui con l'aiuto dell'hook degli stati d'uso che importiamo da
React, dove controlliamo se stiamo attualmente visualizzando i dettagli o meno. Quindi nominerò i dettagli di questo show e
imposterò qui i dettagli dello show
e lo inizializzerò con use state su false in modo che non mostriamo i dettagli inizialmente
e ora quando premiamo questo pulsante qui, ovviamente voglio cambiare questo stato. Quindi, in questa funzione, chiamerò set show details e fondamentalmente invertiremo
il valore, per questo usiamo la sintassi speciale dove passiamo una funzione a quella funzione
di impostazione dello stato qui, dove otteniamo lo stato precedente e quindi restituiamo un nuovo stato basato su quello stato precedente
e qui, tieni presente che
lo stato precedente è effettivamente falso o vero a seconda di quali dettagli dello show
erano, quindi qui non restituirò lo stato precedente per convertirlo, se fosse falso, tornerò vero come nuovo
stato, se fosse vero, restituirò falso come nuovo stato e imposterò questo per mostrare i dettagli.
Ora possiamo usare queste informazioni qui per produrre alcuni contenuti in modo condizionale. Possiamo controllare i dettagli dello show e se questo è vero
e questa è ora la nostra sintassi React che possiamo usare qui, quindi
se questo è vero, allora restituiamo questa vista qui. All'inizio potrebbe sembrare strano ma con ciò stiamo dicendo se questo
è vero e questo è vero e questa è una scorciatoia per Javascript per verificare se questo è vero,
beh, questo è sempre vero perché alla fine è un oggetto quindi questo verrà quindi
reso, ecco come funziona Javascript.
L'alternativa sarebbe un'espressione ternaria o una variabile che si imposta qui che si modifica con un
controllo if e quindi l'output lì.
Quindi userò questa espressione in linea qui in cui ho generato questa vista se mostra i dettagli
è vero e in questa vista, voglio produrre tutti gli elementi.
Quindi, in questa vista, avrò un output dinamico in cui passerò attraverso tutti i miei articoli che
mi aspetto di ottenere sugli oggetti prop di questo componente
dell'articolo di ordine e lì, possiamo mappare i nostri dati in un elenco di elementi jsx, in un elenco dei componenti.
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
esegue questa funzione su ogni articolo del carrello per così dire e ci dà quell'articolo del carrello che è attualmente
alla ricerca e ora per questo articolo, dobbiamo restituire un nuovo elemento jsx che vogliamo produrre ed è
qui che uso il mio carrello per farlo.
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
preso la quantità e il titolo come input e voleva anche l'importo.
Inoltre, abbiamo avuto il pulsante Elimina lì che non voglio sull'articolo dell'ordine, quindi dobbiamo fare
qualcosa al
riguardo, ma concentriamoci su quantità, titolo e quantità per il momento e passiamo in questi pezzi di dati.
Quindi qui la quantità è cartItem. quantità, quantità è cartItem.
e ora ricorda che qualunque cosa immagazziniamo qui negli ordini, negli articoli è alla fine ciò che otteniamo come articoli qui
nel nostro riduttore di
ordini, quindi ciò che otteniamo nella nostra azione. Quindi otteniamo i nostri articoli del carrello lì
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
carrello costanti che contengono questo array che generiamo qui alla fine .
Quindi, alla fine, abbiamo una serie di oggetti simili, quindi abbiamo
il titolo del prodotto, il prezzo del prodotto, la quantità e la somma lì dentro ed è quello con cui
ora possiamo lavorare qui nell'ordine in cui creo il mio carrello articoli, passo nel carrelloItem. quantità, per l'importo, passo
in cartItem. somma e ultimo ma non meno importante
nell'articolo carrello, abbiamo anche bisogno del titolo, quindi sarà cartItem. productTitle quello che passo qui.
Ora il problema rimanente, come ho detto, è che un articolo carrello ha questa icona toccabile qui per
eliminarlo, questo ha senso solo se usiamo questo componente all'interno di un carrello, non
quando lo usiamo all'interno di un ordine che vogliamo produrre che è ovviamente di sola lettura.
Quindi la soluzione è che qui nell'articolo del carrello, avvolgiamo questo e ci aspettiamo semplicemente di ottenere un sostegno che dice ad
esempio eliminabile e solo se è vero, stesso collegamento
di un secondo fa, produciamo questa opacità tangibile, quindi questa
icona in
generale, altrimenti non lo facciamo.
Quindi ora abbiamo questo oggetto cancellabile nell'elemento carrello che deve essere impostato per mostrare l'icona del cestino.
Ciò significa che nella schermata del carrello in cui vogliamo avere l'icona del cestino, quando utilizziamo l'elemento
del carrello lì, dobbiamo impostare l'eliminazione e impostarla in questo modo, questo
lo imposta su vero e lo mostreremo. D'altra parte, nel nostro articolo di ordine in
cui utilizzo anche l'articolo del carrello, non imposto la cancellazione e quindi non eseguiremo il rendering
di questa icona cestino. Quindi diamo un'occhiata a
questo, salviamolo e aggiungiamo questi articoli al carrello, premiamo l'ordine
ora e poi andiamo agli ordini, fai clic su mostra dettagli e ricevo un errore, la mappa degli oggetti
di scena non può essere chiamata perché non definito non un oggetto.
Una ragione di ciò è che sto cercando di scorrere tutti i miei articoli qui nell'ordine ma
nella schermata degli ordini, non sto mai impostando gli oggetti qui.
Quindi nella schermata degli ordini per l'articolo dell'ordine, oltre a passare l'importo e la data, dobbiamo anche
passare gli articoli per l'articolo dell'ordine che stiamo trasmettendo e che, naturalmente, possono essere ricevuti o ricavati dal
nostro articolo Data. articolo che è un singolo ordine
e ora se diamo un'occhiata al modello di ordine, qui avremo questa proprietà degli articoli. Quindi possiamo accedere.
articoli qui e ora passiamo gli articoli nell'ordine e quindi ora possiamo anche emetterli lì.
Quindi ora se ci provi di nuovo e facciamo un nuovo ordine qui e semplicemente diamo un'occhiata a questo, ora
funziona, abbiamo un problema con la chiave qui che ripareremo in un secondo.
Prima di tutto proviamo anche questo su Android, fai clic su ordina ora, quindi vai agli
ordini, mostra i dettagli, ricevi lo stesso avviso ma ho scritto che generalmente funziona, anche se sarebbe bello se questi articoli
fossero un po 'più ampi quindi è anche qualcosa che voglio correggere. Quindi, per correggere questi errori che abbiamo, l'avvertimento deriva
dal fatto
che qui sto mappando i miei dati nei componenti di React e se lo facciamo manualmente con la mappa
qui, dobbiamo assegnare quel prop chiave, questo è un requisito fondamentale di React che tu avremo
in React anche per il web.
Quindi qui, devi puntare a un identificatore univoco e ogni articolo del carrello qui alla fine ha un ID
prodotto che possiamo usare e puoi confermarlo nella schermata del carrello dove crei quella matrice
di articoli
del carrello alla fine, lì memorizziamo quell'ID prodotto e sarà univoco per riga, quindi va bene.
Ora per quanto riguarda la larghezza di questo, possiamo aggiungere uno stile qui, dettagli elementi per esempio e aggiungerlo laggiù nel foglio di
stile e qui,
semplicemente assicurati di impostare una larghezza del 100% in modo da
prendere l'intera larghezza disponibile per il articoli nel carrello. E ora se ci proviamo di nuovo e lo ordiniamo e poi andiamo alla
schermata dei nostri ordini e
mostriamo i dettagli, ora questo sembra il modo in cui dovrebbe apparire e ora possiamo visualizzare i dettagli
e nasconderli, un piccolo miglioramento forse è
che questo il testo dovrebbe aggiornarsi, quindi quando visualizziamo i dettagli, questo dovrebbe dire nascondere i
dettagli e non mostrare i dettagli e, naturalmente, è anche facile da implementare negli articoli dell'ordine, lì abbiamo
questo pulsante, dobbiamo solo impostare questo testo in modo dinamico e controllare se mostra i dettagli che sono il nostro stato
interno qui sono veri.
In tal caso, qui voglio dire nascondere i dettagli, altrimenti dirò mostra i dettagli e ora questo testo
dovrebbe cambiare dinamicamente mentre mostriamo o nascondiamo i nostri dettagli.
Quindi, se lo ordiniamo per l'ultima volta qui, diamo un'occhiata a
questo, ora è mostra i dettagli, ora nasconde
i dettagli, quindi ora funziona davvero nel modo in cui dovrebbe funzionare.
Ora facciamo anche un altro ordine, solo per confermare che funziona davvero. Se lo ordiniamo qui, andiamo alla
schermata degli ordini, ora vedi anche quel secondo ordine e puoi controllarli indipendentemente.
Quindi questa è la schermata degli ordini e come possiamo emettere ordini lì e come possiamo anche riutilizzare l'articolo del carrello qui.