1
00:00:02,660 --> 00:00:08,660
Alors, comment pouvons-nous obtenir des informations sur la catégorie sur laquelle nous avons cliqué, nous avons sélectionné de cet

2
00:00:08,660 --> 00:00:15,240
écran de catégorie à l'écran de catégorie de repas? Eh bien sur l'écran des catégories où nous naviguons vers

3
00:00:15,440 --> 00:00:16,870
la catégorie des repas,

4
00:00:16,880 --> 00:00:21,930
pour cette action de navigation en plus du nom de l'itinéraire, nous pouvons également passer les paramètres.

5
00:00:21,950 --> 00:00:29,510
C'est une autre clé que cet objet que vous avez transmis pour naviguer accepte et cela prend lui-même un objet de paires

6
00:00:29,510 --> 00:00:35,060
clé-valeur, de toutes les paires clé-valeur et autant de paires clé-valeur que vous le souhaitez.

7
00:00:35,060 --> 00:00:40,980
Ce ne sont donc que des paramètres, des données supplémentaires que vous transmettez au nouvel écran en cours de chargement.

8
00:00:41,330 --> 00:00:46,760
Maintenant, là, vous pouvez configurer un paramètre nommé ID de catégorie et le nom dépend entièrement de vous,

9
00:00:46,760 --> 00:00:47,880
qui pourrait être

10
00:00:47,930 --> 00:00:54,590
simplement ID, cid ou mon hobby, quoi que vous construisiez et quelles que soient les données que vous devez transmettre, ici nous transmettons

11
00:00:54,590 --> 00:00:57,640
un ID de catégorie donc je vais le nommer tel.

12
00:00:57,650 --> 00:01:01,410
Cela devrait maintenant être dans notre scénario ici, bien sûr, l'ID de

13
00:01:01,410 --> 00:01:03,980
la catégorie sur laquelle nous avons tapé.

14
00:01:03,980 --> 00:01:07,650
Maintenant, bien sûr, nous obtenons nos données d'élément ici pour chaque élément de la

15
00:01:07,670 --> 00:01:12,480
grille qui est rendu, cela contient l'élément et cela a un titre, une couleur et bien, un ID, donc

16
00:01:12,650 --> 00:01:16,780
l'ID de catégorie est itemData. article. id.

17
00:01:17,180 --> 00:01:23,430
Maintenant, nous transmettons cet ID au nouvel écran en cours de chargement et c'est bien sûr la

18
00:01:23,630 --> 00:01:26,210
chose importante ici, cela nous permet

19
00:01:26,210 --> 00:01:34,620
ensuite d'utiliser ces données dans ce nouvel écran. Comment? Eh bien, allons-y, allons à

20
00:01:34,650 --> 00:01:39,550
l'écran de la catégorie repas et voyons comment extraire ce paramètre.

21
00:01:39,600 --> 00:01:41,400
Nous savons que nous en

22
00:01:41,400 --> 00:01:43,990
aurons un, comment pouvons-nous maintenant y avoir accès?

23
00:01:44,250 --> 00:01:46,740
Pour cela, nous pouvons à nouveau utiliser

24
00:01:46,740 --> 00:01:52,350
la navigation par accessoires, donc cet accessoire spécial que nous obtenons parce que ce composant est chargé à

25
00:01:52,350 --> 00:01:58,860
l'aide d'un navigateur de navigation React et sur la navigation, nous n'avons pas seulement à naviguer et à pousser, etc., nous

26
00:01:58,860 --> 00:02:07,410
avons également getParam, une méthode fournie pour extraire un paramètre que nous recevons. getParam prend une chaîne avec le nom du paramètre que nous

27
00:02:07,410 --> 00:02:12,450
voulons extraire et bien sûr, cela devrait être le nom que vous avez choisi

28
00:02:12,840 --> 00:02:15,590
ici comme clé dans cet objet params.

29
00:02:15,600 --> 00:02:21,330
Alors ici, j'ai ajouté l'ID de catégorie, c'est donc le nom que je veux utiliser ici.

30
00:02:21,330 --> 00:02:29,160
Cela me donnera l'ID du chat, cet ID de catégorie, cela me donnera la valeur que nous stockons ici sur ce nom de clé,

31
00:02:29,160 --> 00:02:30,350
dans ce cas, c'est

32
00:02:30,360 --> 00:02:30,960
l'ID,

33
00:02:30,960 --> 00:02:32,700
donc c'est la valeur que

34
00:02:32,700 --> 00:02:36,360
nous extrayons pour l'ID de catégorie dans la catégorie écran repas.

35
00:02:36,360 --> 00:02:44,100
Alors maintenant, nous avons l'ID de chat et nous pouvons maintenant l'utiliser pour avoir accès à tous les repas qui entrent dans cette catégorie,

36
00:02:44,100 --> 00:02:45,120
pour l'instant

37
00:02:45,120 --> 00:02:51,360
nous n'avons pas de repas, nous devrons donc reporter cela, mais au moins nous pouvons également l'utiliser pour obtenir

38
00:02:51,360 --> 00:02:58,920
le titre de notre catégorie et l'utiliser ici et pour cela, tout ce que nous devons faire est bien sûr d'importer des catégories,

39
00:02:58,920 --> 00:03:08,220
donc notre tableau de catégories ici à partir de données / données factices et nous avons l'ID, nous avons un tableau de catégories , bien sûr, nous pouvons

40
00:03:08,220 --> 00:03:15,600
trouver notre catégorie sélectionnée ou tout ce que vous voulez nommer en jetant un œil aux catégories et là, nous pouvons utiliser

41
00:03:15,960 --> 00:03:21,950
find qui prend une fonction qu'il exécute sur chaque élément du tableau, ainsi de suite sur chaque catégorie

42
00:03:21,950 --> 00:03:27,830
et nous donne l'élément où cette fonction renvoie true, ce qui devrait être le cas si l'ID

43
00:03:27,830 --> 00:03:33,700
de la catégorie que nous examinons correspond à l'ID de chat que nous récupérons de nos paramètres.

44
00:03:33,800 --> 00:03:35,740
Cela nous donne la catégorie sélectionnée et pour

45
00:03:35,750 --> 00:03:42,010
prouver que cela fonctionne, je le sortirai ici dans un composant texte, je sortirai selectedCategory.

46
00:03:42,020 --> 00:03:53,370
titre ici. Maintenant, avec cela, si nous revenons en arrière et que nous naviguons dans cette catégorie, nous voyons

47
00:03:53,370 --> 00:03:56,280
l'italien ici juste au-dessus de mes boutons, nous voyons

48
00:03:56,430 --> 00:04:01,310
maintenant rapidement et facilement, donc cela fonctionne. Voici comment nous transmettons les données et

49
00:04:01,410 --> 00:04:07,710
comment nous les extrayons. Bien sûr, vous pouvez transmettre plusieurs paramètres, autant que vous en avez besoin et les paramètres

50
00:04:08,010 --> 00:04:15,270
ne doivent pas nécessairement être des ID, vous pouvez transmettre des objets, vous pouvez transmettre du texte, les nombres et les tableaux, quelles

51
00:04:15,270 --> 00:04:22,620
que soient les données que vous devez transmettre, vous pouvez les transmettre. Vous remarquerez peut-être cependant qu'avec cela, nous pouvons utiliser notre catégorie ici dans notre

52
00:04:23,040 --> 00:04:25,420
écran, mais nous voulons l'utiliser ici dans l'en-tête.

53
00:04:25,420 --> 00:04:27,030
Eh bien abordons cela dans la prochaine conférence.