1
00:00:02,670 --> 00:00:08,610
Quindi vogliamo trovare i pasti che rientrano nella categoria che abbiamo selezionato, quindi in realtà nella componente della schermata

2
00:00:08,610 --> 00:00:09,660
dei pasti

3
00:00:09,660 --> 00:00:15,000
della categoria, non siamo realmente interessati alla categoria selezionata ma siamo molto interessati ai pasti che

4
00:00:15,000 --> 00:00:17,150
appartengono a quella categoria. Ora, per

5
00:00:17,150 --> 00:00:22,910
questo, possiamo prima di tutto importare il nostro array di pasti perché contiene tutti i possibili

6
00:00:22,910 --> 00:00:28,550
pasti che abbiamo e ora vogliamo filtrare quelli che hanno effettivamente l'ID categoria che abbiamo

7
00:00:28,550 --> 00:00:35,480
selezionato lì, array ID categoria che ogni pasto ha. Vedrai nei dati fittizi che ogni pasto ha questa matrice di

8
00:00:35,480 --> 00:00:36,680
ID categoria a

9
00:00:36,680 --> 00:00:39,320
cui appartiene, quindi è quello che useremo per filtrare.

10
00:00:39,320 --> 00:00:46,010
Quindi nella schermata dei pasti della categoria, vogliamo trovare i pasti che appartengono a quella categoria che abbiamo selezionato e li

11
00:00:46,070 --> 00:00:49,850
memorizzerò in un pasto visualizzato con nome costante, il nome spetta

12
00:00:49,880 --> 00:00:54,230
ovviamente a te e lì, guarderò il mio pasti, quindi è l'intero array di

13
00:00:54,230 --> 00:01:00,260
pasti e utilizza il metodo di filtro che Javascript offre per eseguire una funzione su ogni pasto in quell'array

14
00:01:00,260 --> 00:01:05,840
in cui riceviamo automaticamente il pasto come argomento e dove dobbiamo tornare veri se è uno dei pasti

15
00:01:06,110 --> 00:01:10,740
che vogliamo da mantenere o falso se è uno dei pasti che non vogliamo

16
00:01:10,790 --> 00:01:17,510
conservare e vogliamo conservare tutti i pasti in cui la proprietà ID categoria di quel pasto che stiamo guardando contiene l'ID

17
00:01:17,510 --> 00:01:19,340
categoria che abbiamo selezionato qui.

18
00:01:20,090 --> 00:01:29,990
Quindi qui, restituirò vero se l'indice degli ID categoria di pasto di cui è anche un metodo Javascript, l'ID gatto che abbiamo estratto dai parametri del

19
00:01:30,020 --> 00:01:36,470
percorso, se è maggiore o uguale a zero perché sarà meno uno se l'ID categoria non

20
00:01:36,470 --> 00:01:43,490
è parte degli ID di categoria, se è zero o maggiore, allora sappiamo che questo pasto ha questo

21
00:01:43,490 --> 00:01:50,540
ID di categoria nella sua matrice di ID di categoria e questo ci darà una matrice di pasti

22
00:01:50,540 --> 00:01:53,690
visualizzati per quella categoria selezionata, ora è quello

23
00:01:53,690 --> 00:01:57,710
che vogliamo produrre qui. Ora per questo, ho la

24
00:01:57,710 --> 00:02:04,280
mia vista qui e in quella vista, voglio di nuovo rendere un elenco e ora sarà un elenco

25
00:02:04,280 --> 00:02:11,360
e non una griglia, quindi invece del pulsante di cui non avremo più bisogno, importerò FlatList qui e quindi renderizza

26
00:02:11,360 --> 00:02:13,590
la mia FlatList in questo modo

27
00:02:13,850 --> 00:02:19,910
e ora lì i dati che inserisco ovviamente sono la mia matrice di pasti visualizzata perché sono

28
00:02:19,970 --> 00:02:22,490
i pasti che voglio rendere sullo schermo.

29
00:02:22,700 --> 00:02:30,140
Ora, come accennato in precedenza, le versioni moderne di React Native cercano automaticamente il campo ID in un pasto per usarlo come chiave

30
00:02:30,140 --> 00:02:37,970
in FlatList, se stai usando una versione precedente o anche solo per esercitarti di nuovo, aggiungerò un estrattore di chiavi qui dove ottengo l'oggetto e

31
00:02:37,970 --> 00:02:44,150
l'indice e so che ad ogni pasto, avrò un campo ID perché è quello che abbiamo impostato qui nel

32
00:02:44,150 --> 00:02:48,500
modello e che sarà quello che uso come chiave nel mio elenco, quindi

33
00:02:48,500 --> 00:02:50,570
lo userò qui nell'estrattore di chiavi.

34
00:02:50,570 --> 00:02:56,060
Più importante dell'estrattore di chiavi, tuttavia, è l'elemento di rendering che ovviamente dovrebbe puntare

35
00:02:56,090 --> 00:03:05,710
a una funzione che usiamo per eseguire il rendering di un singolo elemento in quell'elenco e lì, come prima, imposterò una nuova funzione, lo farò

36
00:03:05,880 --> 00:03:15,460
qui all'interno della mia funzione componente in modo che io possa usare oggetti di scena e darò un nome a questo oggetto del pasto di

37
00:03:15,520 --> 00:03:21,310
rendering, il nome dipende totalmente da te. Lì, otterrò alcuni dati dell'articolo, lo so perché

38
00:03:21,310 --> 00:03:27,940
l'elenco semplice ci passa come oggetto dati articolo in questa funzione e lì dentro, dobbiamo restituire un codice jsx

39
00:03:27,940 --> 00:03:34,810
che dovrebbe visualizzare un articolo pasto e lì renderò un visualizzare e per il momento, quindi semplicemente un componente di

40
00:03:34,810 --> 00:03:43,390
testo lì dentro dove voglio produrre itemData. articolo. titolo, quindi solo il nome del pasto per

41
00:03:43,390 --> 00:03:49,420
ora, in seguito visualizzeremo anche l'immagine lì, ma per ora, questo lo farà e ora renderò l'elemento del

42
00:03:49,660 --> 00:04:00,240
pasto è quello che uso qui come l'elemento di rendering della funzione dovrebbe puntare a. Questo dovrebbe rendere un elenco di base dei

43
00:04:00,240 --> 00:04:07,560
pasti, vediamo se funziona. Se lo salviamo e ora selezioniamo diciamo italiano, vedo spaghetti al pomodoro,

44
00:04:07,560 --> 00:04:08,810
non sembra male.

45
00:04:08,880 --> 00:04:15,120
Veloce e facile, vediamo quattro pasti e hamburger, vediamo l'hamburger classico, leggero e delizioso, vediamo

46
00:04:15,120 --> 00:04:21,640
due ricette, quindi sembra che funzioni, sembra che le ricette siano selezionate in base alla categoria

47
00:04:21,660 --> 00:04:28,500
che abbiamo scelto ed è ovviamente fantastico. Ora è di nuovo il momento di lavorare un po 'sullo stile perché non sono

48
00:04:28,500 --> 00:04:31,170
sicuro di te ma penso che possiamo migliorarlo un po'.