1
00:00:02,670 --> 00:00:08,610
Nous voulons donc trouver les repas qui correspondent à la catégorie que nous avons sélectionnée, donc en fait dans la composante écran

2
00:00:08,610 --> 00:00:09,660
de repas de

3
00:00:09,660 --> 00:00:15,000
catégorie, nous ne sommes pas vraiment intéressés par la catégorie sélectionnée mais nous sommes très intéressés par les repas qui

4
00:00:15,000 --> 00:00:17,150
appartiennent à cette catégorie. Maintenant, pour cela,

5
00:00:17,150 --> 00:00:22,910
nous pouvons tout d'abord importer notre tableau de repas car il contient tous les repas possibles que

6
00:00:22,910 --> 00:00:28,550
nous avons et maintenant nous voulons filtrer ceux qui ont réellement l'ID de catégorie que nous avons

7
00:00:28,550 --> 00:00:35,480
sélectionné, le tableau d'ID de catégorie que chaque repas a. Vous verrez dans les données factices que chaque repas possède ce tableau d'ID

8
00:00:35,480 --> 00:00:36,680
de catégorie auquel il

9
00:00:36,680 --> 00:00:39,320
appartient, c'est donc ce que nous utiliserons pour le filtrage.

10
00:00:39,320 --> 00:00:46,010
Donc, dans l'écran de catégorie de repas, nous voulons trouver les repas qui appartiennent à cette catégorie que nous avons sélectionnée et je les

11
00:00:46,070 --> 00:00:49,850
stocke dans une constante nommée repas affichés, le nom est bien sûr à

12
00:00:49,880 --> 00:00:54,230
vous et là, je vais regarder mon repas, c'est donc tout le tableau des repas

13
00:00:54,230 --> 00:01:00,260
et utilisez la méthode de filtrage que Javascript propose pour exécuter une fonction sur chaque repas dans ce tableau où nous

14
00:01:00,260 --> 00:01:05,840
obtenons automatiquement le repas comme argument et où nous devons retourner vrai s'il s'agit d'un des repas que nous voulons

15
00:01:06,110 --> 00:01:10,740
à conserver ou faux s'il s'agit de l'un des repas que nous ne voulons pas conserver

16
00:01:10,790 --> 00:01:17,510
et que nous voulons conserver tous les repas où la propriété ID de catégorie de ce repas que nous examinons contient l'ID de catégorie

17
00:01:17,510 --> 00:01:19,340
que nous avons sélectionné ici.

18
00:01:20,090 --> 00:01:29,990
Donc, ici, je reviendrai vrai si l'index des ID de catégorie de repas est également une méthode Javascript, l'ID de chat que nous avons extrait des paramètres

19
00:01:30,020 --> 00:01:36,470
de l'itinéraire, s'il est supérieur ou égal à zéro car ce sera moins un si l'ID de

20
00:01:36,470 --> 00:01:43,490
catégorie n'est pas partie des ID de catégorie, si elle est nulle ou supérieure, nous savons que ce repas

21
00:01:43,490 --> 00:01:50,540
a cet ID de catégorie dans son tableau d'ID de catégorie et cela nous donnera un tableau des repas

22
00:01:50,540 --> 00:01:53,690
affichés pour cette catégorie sélectionnée, c'est ce que

23
00:01:53,690 --> 00:01:57,710
nous voulons afficher ici. Maintenant, pour cela, j'ai ma

24
00:01:57,710 --> 00:02:04,280
vue ici et dans cette vue, je veux à nouveau rendre une liste et maintenant ce sera une liste

25
00:02:04,280 --> 00:02:11,360
et non une grille, donc au lieu du bouton dont nous n'aurons plus besoin, je vais importer FlatList ici et ensuite

26
00:02:11,360 --> 00:02:13,590
rendre ma FlatList comme ceci et

27
00:02:13,850 --> 00:02:19,910
maintenant là, les données que j'alimente sont bien sûr mon tableau de repas affiché parce que ce sont

28
00:02:19,970 --> 00:02:22,490
les repas que je veux rendre à l'écran.

29
00:02:22,700 --> 00:02:30,140
Maintenant, comme mentionné précédemment, les versions modernes de React Native recherchent automatiquement le champ ID dans un repas pour l'utiliser comme clé dans FlatList, si

30
00:02:30,140 --> 00:02:37,970
vous utilisez une version plus ancienne ou simplement pour la répéter, j'ajouterai un extracteur de clé ici où je reçois l'article et l'index et je sais

31
00:02:37,970 --> 00:02:44,150
qu'à chaque repas, j'aurai un champ ID parce que c'est ce que nous avons mis en place ici dans le modèle

32
00:02:44,150 --> 00:02:48,500
et ce sera ce que j'utilise comme clé dans ma liste, donc je vais

33
00:02:48,500 --> 00:02:50,570
l'utiliser ici dans l'extracteur de clés.

34
00:02:50,570 --> 00:02:56,060
Cependant, plus important que l'extracteur de clés est le rendu de l'élément qui, bien sûr,

35
00:02:56,090 --> 00:03:05,710
devrait pointer vers une fonction que nous utilisons pour rendre un seul élément dans cette liste et là, comme avant, je configurerai une nouvelle fonction, je

36
00:03:05,880 --> 00:03:15,460
le ferai ici à l'intérieur de ma fonction de composant afin que je puisse utiliser des accessoires et je vais nommer cet élément de repas de

37
00:03:15,520 --> 00:03:21,310
rendu, le nom dépend entièrement de vous. Là-bas, j'obtiendrai des données sur les articles, je le sais

38
00:03:21,310 --> 00:03:27,940
parce que la liste plate nous passe en tant qu'objet de données sur les articles dans cette fonction et là-bas, nous devons

39
00:03:27,940 --> 00:03:34,810
renvoyer un code jsx qui devrait rendre un élément de repas et là, je rendrai un vue et pour le moment, puis simplement un

40
00:03:34,810 --> 00:03:43,390
composant de texte là où je veux sortir itemData. article. titre, donc juste le nom du repas pour

41
00:03:43,390 --> 00:03:49,420
l'instant, plus tard, nous afficherons également l'image là-bas, mais pour l'instant, cela fera l'affaire et le rendu de l'élément

42
00:03:49,660 --> 00:04:00,240
de repas est ce que j'utilise ici car la fonction de rendu de l'élément devrait pointer. Cela devrait rendre une liste de base des

43
00:04:00,240 --> 00:04:07,560
repas, voyons si cela fonctionne. Si nous enregistrons cela et que nous sélectionnons maintenant disons l'italien, je vois des spaghettis à la sauce tomate,

44
00:04:07,560 --> 00:04:08,810
ça n'a pas l'air trop mal.

45
00:04:08,880 --> 00:04:15,120
Rapide et facile, nous voyons quatre repas et hamburgers, nous voyons le hamburger classique, léger et charmant, nous

46
00:04:15,120 --> 00:04:21,640
voyons deux recettes, donc cela semble fonctionner, on dirait que les recettes sont sélectionnées en fonction de la catégorie

47
00:04:21,660 --> 00:04:28,500
que nous avons choisie et c'est bien sûr génial. Maintenant, il est de nouveau temps de travailler un peu sur le style parce que je ne suis

48
00:04:28,500 --> 00:04:31,170
pas sûr de vous, mais je pense que nous pouvons l'améliorer un peu.