Nous voulons donc trouver les repas qui correspondent à la catégorie que nous avons sélectionnée, donc en fait dans la composante écran
de repas de
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
appartiennent à cette catégorie. Maintenant, pour cela,
nous pouvons tout d'abord importer notre tableau de repas car il contient tous les repas possibles que
nous avons et maintenant nous voulons filtrer ceux qui ont réellement l'ID de catégorie que nous avons
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
de catégorie auquel il
appartient, c'est donc ce que nous utiliserons pour le filtrage.
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
stocke dans une constante nommée repas affichés, le nom est bien sûr à
vous et là, je vais regarder mon repas, c'est donc tout le tableau des repas
et utilisez la méthode de filtrage que Javascript propose pour exécuter une fonction sur chaque repas dans ce tableau où nous
obtenons automatiquement le repas comme argument et où nous devons retourner vrai s'il s'agit d'un des repas que nous voulons
à conserver ou faux s'il s'agit de l'un des repas que nous ne voulons pas conserver
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
que nous avons sélectionné ici.
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
de l'itinéraire, s'il est supérieur ou égal à zéro car ce sera moins un si l'ID de
catégorie n'est pas partie des ID de catégorie, si elle est nulle ou supérieure, nous savons que ce repas
a cet ID de catégorie dans son tableau d'ID de catégorie et cela nous donnera un tableau des repas
affichés pour cette catégorie sélectionnée, c'est ce que
nous voulons afficher ici. Maintenant, pour cela, j'ai ma
vue ici et dans cette vue, je veux à nouveau rendre une liste et maintenant ce sera une liste
et non une grille, donc au lieu du bouton dont nous n'aurons plus besoin, je vais importer FlatList ici et ensuite
rendre ma FlatList comme ceci et
maintenant là, les données que j'alimente sont bien sûr mon tableau de repas affiché parce que ce sont
les repas que je veux rendre à l'écran.
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
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
qu'à chaque repas, j'aurai un champ ID parce que c'est ce que nous avons mis en place ici dans le modèle
et ce sera ce que j'utilise comme clé dans ma liste, donc je vais
l'utiliser ici dans l'extracteur de clés.
Cependant, plus important que l'extracteur de clés est le rendu de l'élément qui, bien sûr,
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
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
rendu, le nom dépend entièrement de vous. Là-bas, j'obtiendrai des données sur les articles, je le sais
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
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
composant de texte là où je veux sortir itemData. article. titre, donc juste le nom du repas pour
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
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
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,
ça n'a pas l'air trop mal.
Rapide et facile, nous voyons quatre repas et hamburgers, nous voyons le hamburger classique, léger et charmant, nous
voyons deux recettes, donc cela semble fonctionner, on dirait que les recettes sont sélectionnées en fonction de la catégorie
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
pas sûr de vous, mais je pense que nous pouvons l'améliorer un peu.