1
00:00:02,670 --> 00:00:08,610
Portanto, queremos encontrar as refeições que se encaixam na categoria que selecionamos; portanto, no componente de tela de

2
00:00:08,610 --> 00:00:09,660
refeição da

3
00:00:09,660 --> 00:00:15,000
categoria, não estamos realmente interessados na categoria selecionada, mas estamos muito interessados nas refeições que pertencem

4
00:00:15,000 --> 00:00:17,150
a essa categoria. Agora, para

5
00:00:17,150 --> 00:00:22,910
isso, podemos primeiro importar nossa matriz de refeições, porque ela contém todas as refeições possíveis que

6
00:00:22,910 --> 00:00:28,550
temos e agora queremos filtrar as que realmente têm o ID da categoria que selecionamos lá,

7
00:00:28,550 --> 00:00:35,480
o array de ID da categoria que cada refeição possui. Você verá nos dados fictícios que todas as refeições têm esse conjunto de

8
00:00:35,480 --> 00:00:36,680
IDs de categoria aos

9
00:00:36,680 --> 00:00:39,320
quais pertencem, e é isso que usaremos para filtrar.

10
00:00:39,320 --> 00:00:46,010
Portanto, na tela de categoria de refeições, queremos encontrar as refeições que pertencem a essa categoria que selecionamos e eu as armazenarei

11
00:00:46,070 --> 00:00:49,850
em uma constante refeições nomeadas exibidas, o nome é claro que

12
00:00:49,880 --> 00:00:54,230
depende de você e, aqui, examinarei minhas refeições, de modo que é toda a

13
00:00:54,230 --> 00:01:00,260
matriz de refeições e use o método de filtro que o Javascript oferece para executar uma função em todas as

14
00:01:00,260 --> 00:01:05,840
refeições nessa matriz, onde obtemos a refeição automaticamente como argumento e onde precisamos retornar true se for uma

15
00:01:06,110 --> 00:01:10,740
das refeições que queremos manter ou falso se for uma das refeições que não queremos

16
00:01:10,790 --> 00:01:17,510
e queremos manter todas as refeições em que a propriedade dos IDs da categoria da refeição que estamos vendo contenha o ID

17
00:01:17,510 --> 00:01:19,340
da categoria que selecionamos aqui.

18
00:01:20,090 --> 00:01:29,990
Portanto, retornarei true se o índice de IDs da categoria de refeição também for um método Javascript, o ID do gato que extraímos dos parâmetros de

19
00:01:30,020 --> 00:01:36,470
rota, se for maior ou igual a zero, porque será menos um se o ID da categoria

20
00:01:36,470 --> 00:01:43,490
não for parte dos IDs de categoria, se for zero ou maior, sabemos que esta refeição tem esse

21
00:01:43,490 --> 00:01:50,540
ID de categoria em sua matriz de IDs de categoria e isso nos fornecerá uma variedade de refeições

22
00:01:50,540 --> 00:01:53,690
exibidas para essa categoria selecionada, agora é isso

23
00:01:53,690 --> 00:01:57,710
que queremos exibir aqui. Agora, eu tenho minha

24
00:01:57,710 --> 00:02:04,280
visão aqui e, nessa visão, quero novamente renderizar uma lista e agora ela será uma lista e não

25
00:02:04,280 --> 00:02:11,360
uma grade. Portanto, em vez do botão que não será mais necessário, importarei FlatList aqui e, em seguida, renderize

26
00:02:11,360 --> 00:02:13,590
meu FlatList dessa forma e agora

27
00:02:13,850 --> 00:02:19,910
os dados que eu alimentei, é claro, são minha matriz de refeições exibida, porque são as

28
00:02:19,970 --> 00:02:22,490
refeições que eu quero renderizar na tela.

29
00:02:22,700 --> 00:02:30,140
Agora, como mencionado anteriormente, as versões modernas do React Native procuram automaticamente o campo ID em uma refeição para usá-lo como uma chave no FlatList,

30
00:02:30,140 --> 00:02:37,970
se você estiver usando uma versão mais antiga ou apenas para praticar isso novamente, adicionarei um extrator de chave aqui onde eu pego o item e o

31
00:02:37,970 --> 00:02:44,150
índice e sei que em cada refeição, terei um campo de ID porque é isso que configuramos aqui no modelo e

32
00:02:44,150 --> 00:02:48,500
será o que eu uso como chave na minha lista, então eu vou usar

33
00:02:48,500 --> 00:02:50,570
isso aqui no extrator de chaves.

34
00:02:50,570 --> 00:02:56,060
Mais importante que o extrator de chaves, no entanto, é o item de renderização,

35
00:02:56,090 --> 00:03:05,710
que obviamente deve apontar para uma função que usamos para renderizar um único item nessa lista e lá, como antes, configurarei uma nova função, eu

36
00:03:05,880 --> 00:03:15,460
o farei aqui dentro da minha função de componente para que eu possa usar adereços e nomeie esse item de refeição de renderização, o

37
00:03:15,520 --> 00:03:21,310
nome é totalmente de sua responsabilidade. Lá, eu receberei alguns dados do item, eu sei

38
00:03:21,310 --> 00:03:27,940
disso porque a lista simples nos passa como objeto de dados do item para esta função e lá temos que retornar

39
00:03:27,940 --> 00:03:34,810
um código jsx que deve renderizar um item de refeição e lá eu renderizarei um visualizar e, por enquanto, simplesmente um componente

40
00:03:34,810 --> 00:03:43,390
de texto onde eu quero gerar o itemData. item. title, portanto, apenas o nome da refeição no

41
00:03:43,390 --> 00:03:49,420
momento, mais tarde também exibiremos a imagem lá, mas, por enquanto, isso fará e agora renderizará o item

42
00:03:49,660 --> 00:04:00,240
da refeição é o que eu uso aqui, pois a função renderizar item deve apontar para. Isso deve render uma lista básica de refeições,

43
00:04:00,240 --> 00:04:07,560
vamos ver se isso funciona. Se salvarmos isso e agora selecionarmos, digamos italiano, vejo espaguete com molho de tomate,

44
00:04:07,560 --> 00:04:08,810
não parece tão ruim.

45
00:04:08,880 --> 00:04:15,120
Rápido e fácil, vemos quatro refeições e hambúrgueres, vemos o hambúrguer clássico, leve e adorável,

46
00:04:15,120 --> 00:04:21,640
vemos duas receitas, de modo que parece funcionar, parece que as receitas são selecionadas com base

47
00:04:21,660 --> 00:04:28,500
na categoria que escolhemos e isso é ótimo. Agora é novamente a hora de trabalhar um pouco no estilo, porque não tenho

48
00:04:28,500 --> 00:04:31,170
certeza de você, mas acho que podemos melhorar um pouco.