Quindi, come possiamo ottenere informazioni sulla categoria su cui abbiamo fatto clic, abbiamo selezionato dalla schermata di
questa categoria alla schermata dei pasti di categoria? Bene nella schermata delle categorie in cui passiamo ai pasti
delle categorie, per
questa azione di navigazione oltre al nome del percorso, possiamo anche passare i parametri.
Questa è un'altra chiave accettata da questo oggetto che hai passato per navigare e questo prende un oggetto
di coppie chiave-valore, di qualsiasi coppia chiave-valore e di quante coppie chiave-valore desideri.
Quindi questi sono semplicemente parametri, dati extra che stai passando alla nuova schermata che viene caricata.
Ora lì, potresti impostare un parametro chiamato ID categoria e il nome dipende totalmente da te,
che potrebbe essere
solo ID, cid o il mio hobby, qualunque cosa tu stia costruendo e qualunque dato tu abbia bisogno di inoltrare, qui
stiamo inoltrando un ID categoria quindi lo chiamerò tale.
Questo ora dovrebbe essere nel nostro scenario qui, ovviamente, l'ID
della categoria su cui abbiamo attinto.
Ora, ovviamente, stiamo ottenendo i dati dei nostri articoli qui per ogni elemento della
griglia che viene reso, questo contiene l'elemento e questo ha un titolo, un colore e un pozzo, un ID,
quindi l'ID categoria è itemData. articolo. id.
Ora stiamo inoltrando quell'ID alla nuova schermata che viene caricata e, ovviamente, questa è la cosa
importante qui, questo ci consente di
utilizzare quei dati in quella nuova schermata. Come? Bene, andiamo lì, andiamo alla schermata
dei pasti della categoria e vediamo come possiamo estrarre quel parametro.
Sappiamo che ne
avremo uno, come possiamo ora accedervi?
Per questo, possiamo nuovamente utilizzare la
navigazione dei puntelli, quindi questo puntello speciale che stiamo ottenendo perché questo componente viene caricato con
l'aiuto di un navigatore di navigazione React e sulla navigazione, non abbiamo solo navigazione e push e così via,
abbiamo anche getParam, un metodo fornito per estrarre un parametro che riceviamo. getParam prende una stringa con il nome del parametro che
vogliamo estrarre e, naturalmente, quello dovrebbe essere il nome che hai scelto
qui come chiave nell'oggetto params.
Quindi qui ho aggiunto l'ID categoria, quindi questo è il nome che voglio usare qui.
Questo mi darà l'ID gatto, quell'ID categoria, Questo mi darà il valore che stiamo memorizzando qui su quel nome chiave, in questo
caso, questo è
l'ID,
quindi questo è il valore
che stiamo estraendo per l'ID categoria nella categoria schermo dei pasti.
Quindi ora abbiamo l'ID gatto e ora possiamo usarlo per avere ovviamente accesso a tutti i pasti che rientrano in questa
categoria, in
questo momento non abbiamo pasti quindi dovremo rimandare questo, ma almeno possiamo anche usare questo per ottenere
il titolo della nostra categoria e usarlo qui e per quello, tutto ciò che dobbiamo fare ovviamente è che dobbiamo
importare le categorie, quindi le nostre categorie vanno qui da dati / dati fittizi e abbiamo l'ID, abbiamo una matrice di categorie , ovviamente possiamo
trovare la nostra categoria selezionata o qualunque cosa tu voglia nominarla dando un'occhiata alle categorie e lì, possiamo usare find
che prende una funzione che esegue su ogni elemento dell'array, quindi su ogni categoria e ci
dà l'elemento in cui questa funzione restituisce true, che dovrebbe essere il caso se l'ID
per la categoria che stiamo osservando corrisponde all'ID gatto che stiamo recuperando dai nostri parametri.
Questo ci dà la categoria selezionata e per
dimostrare che funziona, la produrrò qui in un componente di testo, produrrò la categoria selezionata.
titolo qui. Ora con ciò, se torniamo indietro e navighiamo in quella categoria, vediamo l'italiano
qui sopra i miei pulsanti, vediamo ora
veloce e facile, quindi funziona. Questo è il modo in
cui passiamo i dati e come li stiamo estraendo e, naturalmente, puoi passare più parametri, quanti
ne hai bisogno e i parametri non devono essere ID, puoi passare oggetti, puoi passare testo, numeri e matrici,
qualunque sia il dato che devi trasmettere, puoi passare. Tuttavia, potresti notare che, ovviamente, siamo in grado di utilizzare la nostra categoria qui
nella nostra schermata, ma vogliamo usarla qui nell'intestazione.
Bene, affrontiamolo nella prossima lezione.