1
00:00:02,170 --> 00:00:10,150
Como podemos resolver o problema que aqui precisamos encontrar uma refeição específica e não podemos realmente usar nosso

2
00:00:10,600 --> 00:00:13,600
seletor aqui nas opções de navegação?

3
00:00:13,600 --> 00:00:19,960
Agora, existem duas correções possíveis - a correção número um é que usamos novamente os bons e velhos parâmetros

4
00:00:19,990 --> 00:00:22,190
para se comunicar entre as opções

5
00:00:22,210 --> 00:00:29,470
de componente e navegação, como mostrei no módulo de navegação. Aqui no componente, estamos carregando nossa refeição, então é claro

6
00:00:29,470 --> 00:00:37,310
que aqui podemos usar parâmetros de navegação de adereços e agora definir os parâmetros para um novo valor aqui e agora podemos usar parâmetros para encaminhar

7
00:00:37,310 --> 00:00:43,300
a refeição selecionada ou seu título para o cabeçalho e o que quer que você defina aqui como parâmetros será

8
00:00:43,300 --> 00:00:48,340
mesclado com os parâmetros existentes, portanto isso não os substituirá, portanto você não substituirá a sua

9
00:00:48,340 --> 00:00:52,630
refeiçãoId que você está recuperando aqui, que ainda estará lá, você estará apenas adicionando

10
00:00:52,870 --> 00:00:56,840
algo novo, você só substituirá um parâmetro se ele já existir nos parâmetros.

11
00:00:56,920 --> 00:01:04,030
Portanto, aqui, podemos adicionar a chave do título da refeição e configurá-la para a refeição selecionada. título.

12
00:01:04,050 --> 00:01:13,120
Agora, isso significa que enviei esses parâmetros para o meu cabeçalho quando este componente é renderizado no final.

13
00:01:15,800 --> 00:01:20,270
Agora, como isso mudará os props, normalmente terminaríamos em um loop infinito;

14
00:01:20,270 --> 00:01:24,710
portanto, para quebrar isso, usaremos o efeito use aqui como mostrei

15
00:01:24,800 --> 00:01:29,780
no módulo de navegação e, na verdade, faremos isso dentro do efeito use.

16
00:01:29,780 --> 00:01:32,690
Portanto, aqui podemos usar o efeito use e, como

17
00:01:35,230 --> 00:01:41,430
uma dependência, especificarei uma matriz vazia por enquanto e então definiremos parâmetros aqui dentro da função use effect e

18
00:01:41,440 --> 00:01:42,320
não terei

19
00:01:42,520 --> 00:01:47,290
uma matriz vazia aqui. Em vez disso, minha dependência aqui é a minha selecionada. refeição.

20
00:01:47,290 --> 00:01:55,150
Quando isso mudar, desejo encaminhar as novas informações para o cabeçalho. Agora vamos ver se isso funciona, vamos para o

21
00:01:55,150 --> 00:01:56,250
cabeçalho e

22
00:01:56,350 --> 00:01:59,050
agora podemos recuperar isso dos parâmetros.

23
00:01:59,050 --> 00:02:01,720
Portanto, aqui tenho o título da minha

24
00:02:02,080 --> 00:02:09,240
refeição, posso obter isso com navigationData. navegação. título da refeição getParam, esse foi

25
00:02:09,240 --> 00:02:12,660
o nome que escolhi ao definir os parâmetros aqui.

26
00:02:19,700 --> 00:02:21,590
Agora, com o título da

27
00:02:21,590 --> 00:02:28,190
refeição selecionado aqui, podemos definir o título do cabeçalho para esse título da refeição e comentar esta linha porque ela não

28
00:02:28,200 --> 00:02:30,140
funcionará de qualquer maneira e vamos tentar.

29
00:02:30,140 --> 00:02:35,660
Vamos salvar isso e ir para a página de detalhes e, enquanto isso

30
00:02:35,660 --> 00:02:40,410
funcionar, você verá um problema. Quando isso carrega, inicialmente não há título e isso

31
00:02:40,430 --> 00:02:42,140
só aparece depois de um tempo.

32
00:02:42,140 --> 00:02:47,350
Portanto, somente após o carregamento completo, vemos o título pop que não é muito

33
00:02:47,360 --> 00:02:49,530
bonito e a razão disso

34
00:02:49,790 --> 00:02:55,340
simplesmente é que nossa lógica funciona, mas como o efeito use é executado após o componente

35
00:02:55,340 --> 00:03:00,770
ter sido renderizado pela primeira vez, esperamos para que o componente seja renderizado pela primeira

36
00:03:00,770 --> 00:03:06,980
vez até enviarmos os parâmetros para o título, e isso significa que, quando essa transição ainda está

37
00:03:06,980 --> 00:03:12,400
em execução e a renderização não foi totalmente concluída, não estamos realmente mostrando esse título.

38
00:03:12,680 --> 00:03:15,630
É por isso que essa pode não ser a

39
00:03:15,650 --> 00:03:20,960
solução ideal aqui e vou comentar isso. Uma solução melhor aqui, por mais barata que

40
00:03:21,060 --> 00:03:26,310
possa parecer, mas também é uma solução que você pode usar com frequência, é simplesmente encaminhar o

41
00:03:26,310 --> 00:03:31,800
título que precisaremos aqui do componente de onde você é, para carregá-lo quando você estiver no componente que

42
00:03:31,800 --> 00:03:36,510
irá para esse componente e o enviará para esse componente antes que ele seja carregado.

43
00:03:36,510 --> 00:03:42,090
Então, vamos enviar os dados com antecedência e estamos vindo da tela

44
00:03:42,090 --> 00:03:49,880
de favoritos ou da categoria de refeição. No final, estamos tocando em um item na lista de refeições e nos dois

45
00:03:49,890 --> 00:03:54,240
itens, nos dois componentes, tela favorita e tela de categoria, estamos usando a lista de refeições, o

46
00:03:54,240 --> 00:04:00,420
que é bom, porque isso significa que podemos ir para a lista de refeições aqui e lá, nós temos essa ação de navegação e agora,

47
00:04:00,420 --> 00:04:06,330
além de passar o ID da refeição, seria bom se nós já passássemos o título da refeição, porque aqui temos ele disponível, certo?

48
00:04:06,540 --> 00:04:13,350
itemData. item. título, esse é o nosso título da refeição. Simplesmente fornecendo aqui, resolvemos todos

49
00:04:13,350 --> 00:04:17,950
os problemas que temos na outra tela, então essa é definitivamente a abordagem que queremos usar aqui.

50
00:04:18,090 --> 00:04:24,060
Então, definindo esse parâmetro aqui no componente em que acionamos a ação de navegação para a página de detalhes da refeição,

51
00:04:24,060 --> 00:04:30,270
corrigimos esse problema porque agora você vê o título lá desde o início e não temos nenhum problema lá e o

52
00:04:30,270 --> 00:04:36,180
mesmo, é claro também no Android, se tentarmos lá. Meu emulador é um pouco

53
00:04:36,180 --> 00:04:43,380
lento, mas geralmente você pode vê-lo lá também. É assim que podemos trabalhar com dados no

54
00:04:43,380 --> 00:04:50,850
cabeçalho quando precisamos do Redux e, com isso, temos um primeiro estado sólido, somos capazes de usar

55
00:04:50,850 --> 00:04:54,830
nossos dados Redux. O que realmente não somos capazes de

56
00:04:54,900 --> 00:04:59,790
fazer é alterá-lo. Portanto, esse é o próximo passo. Queremos adicionar um pouco de lógica para poder alterar os

57
00:04:59,880 --> 00:05:01,890
dados, marcar os favoritos e filtrar nossos dados.