Como podemos resolver o problema que aqui precisamos encontrar uma refeição específica e não podemos realmente usar nosso
seletor aqui nas opções de navegação?
Agora, existem duas correções possíveis - a correção número um é que usamos novamente os bons e velhos parâmetros
para se comunicar entre as opções
de componente e navegação, como mostrei no módulo de navegação. Aqui no componente, estamos carregando nossa refeição, então é claro
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
a refeição selecionada ou seu título para o cabeçalho e o que quer que você defina aqui como parâmetros será
mesclado com os parâmetros existentes, portanto isso não os substituirá, portanto você não substituirá a sua
refeiçãoId que você está recuperando aqui, que ainda estará lá, você estará apenas adicionando
algo novo, você só substituirá um parâmetro se ele já existir nos parâmetros.
Portanto, aqui, podemos adicionar a chave do título da refeição e configurá-la para a refeição selecionada. título.
Agora, isso significa que enviei esses parâmetros para o meu cabeçalho quando este componente é renderizado no final.
Agora, como isso mudará os props, normalmente terminaríamos em um loop infinito;
portanto, para quebrar isso, usaremos o efeito use aqui como mostrei
no módulo de navegação e, na verdade, faremos isso dentro do efeito use.
Portanto, aqui podemos usar o efeito use e, como
uma dependência, especificarei uma matriz vazia por enquanto e então definiremos parâmetros aqui dentro da função use effect e
não terei
uma matriz vazia aqui. Em vez disso, minha dependência aqui é a minha selecionada. refeição.
Quando isso mudar, desejo encaminhar as novas informações para o cabeçalho. Agora vamos ver se isso funciona, vamos para o
cabeçalho e
agora podemos recuperar isso dos parâmetros.
Portanto, aqui tenho o título da minha
refeição, posso obter isso com navigationData. navegação. título da refeição getParam, esse foi
o nome que escolhi ao definir os parâmetros aqui.
Agora, com o título da
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
funcionará de qualquer maneira e vamos tentar.
Vamos salvar isso e ir para a página de detalhes e, enquanto isso
funcionar, você verá um problema. Quando isso carrega, inicialmente não há título e isso
só aparece depois de um tempo.
Portanto, somente após o carregamento completo, vemos o título pop que não é muito
bonito e a razão disso
simplesmente é que nossa lógica funciona, mas como o efeito use é executado após o componente
ter sido renderizado pela primeira vez, esperamos para que o componente seja renderizado pela primeira
vez até enviarmos os parâmetros para o título, e isso significa que, quando essa transição ainda está
em execução e a renderização não foi totalmente concluída, não estamos realmente mostrando esse título.
É por isso que essa pode não ser a
solução ideal aqui e vou comentar isso. Uma solução melhor aqui, por mais barata que
possa parecer, mas também é uma solução que você pode usar com frequência, é simplesmente encaminhar o
título que precisaremos aqui do componente de onde você é, para carregá-lo quando você estiver no componente que
irá para esse componente e o enviará para esse componente antes que ele seja carregado.
Então, vamos enviar os dados com antecedência e estamos vindo da tela
de favoritos ou da categoria de refeição. No final, estamos tocando em um item na lista de refeições e nos dois
itens, nos dois componentes, tela favorita e tela de categoria, estamos usando a lista de refeições, o
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,
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?
itemData. item. título, esse é o nosso título da refeição. Simplesmente fornecendo aqui, resolvemos todos
os problemas que temos na outra tela, então essa é definitivamente a abordagem que queremos usar aqui.
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,
corrigimos esse problema porque agora você vê o título lá desde o início e não temos nenhum problema lá e o
mesmo, é claro também no Android, se tentarmos lá. Meu emulador é um pouco
lento, mas geralmente você pode vê-lo lá também. É assim que podemos trabalhar com dados no
cabeçalho quando precisamos do Redux e, com isso, temos um primeiro estado sólido, somos capazes de usar
nossos dados Redux. O que realmente não somos capazes de
fazer é alterá-lo. Portanto, esse é o próximo passo. Queremos adicionar um pouco de lógica para poder alterar os
dados, marcar os favoritos e filtrar nossos dados.