Agora, com os filtros renderizados aqui, é claro que seria bom ter um botão de salvar aqui na parte
superior que nos permite salvar quaisquer alterações nos filtros que fizemos.
Portanto, na tela de filtros, já temos um botão de cabeçalho em headerLeft, agora também
quero ter um em headerRight, à direita do meu cabeçalho. Então headerRight aqui é basicamente o mesmo que o temos
aqui, então podemos copiar isso aqui porque queremos ter botões de cabeçalho lá com
um botão, que será o botão salvar e o ícone que podemos usar é, por exemplo e de Claro que você pode
escolher um diferente, mas aqui, eu irei com, por exemplo, salvar e agora, quando isso for pressionado, isso
será um pouco complicado. Obviamente, podemos disparar uma
função e podermos consolar os filtros para salvar logs aqui.
Agora, a lógica real para salvar e aplicar filtros é algo que trataremos no próximo módulo,
mas, ainda assim, há algum problema com isso.
Se eu salvá-lo assim e formos aos filtros, é claro
que podemos pressionar isso, isso funciona, mas o que seria bom é que realmente reunamos nosso estado atual de filtros, então, basicamente, tire uma foto do nosso
estado atual aqui e por enquanto, registre-o no console; no próximo módulo, aplique-o de alguma forma para filtrar
as receitas que estamos mostrando nas outras telas. Agora isso pode parecer trivial, mas teremos um problema aqui,
nossos filtros, portanto, as
informações, quais filtros estão configurados, tudo armazenado nessas variáveis de estado aqui, certo e faz parte do nosso componente, nosso
botão, porém, está na navegação opções
e sim, lá obtemos os dados de snap
que, por exemplo, nos dão o suporte de navegação no final, mas o que não temos aqui
é acesso ao estado do nosso componente e é isso que eu preciso aqui e agora
isso aqui é realmente um padrão importante que pode parecer um hack ou solução
alternativa estranho, mas que é a maneira de se comunicar de fato entre as opções de navegação e o componente, se você depende da alteração de dados
no componente dentro das opções de navegação. Portanto, nas opções de navegação,
você precisa de informações sobre os dados que foram alterados no seu componente.
Essa também é uma abordagem que você encontra nos documentos oficiais da navegação a propósito. Podemos usar parâmetros, para que aquilo que
passamos entre as telas, comunique-se entre nosso componente e as opções de navegação, e isso
possa parecer estranho, mas é exatamente isso que faremos agora.
Digamos que aqui em nosso componente, adicionamos uma nova função e vou nomear essa função aqui, salvar filtros,
você pode nomear como quiser.
É uma função que não aceita argumentos, mas
que possui um trabalho, criará uma constante de filtros aplicados, por exemplo, que é um objeto que reúne nossos filtros.
Portanto, podemos ter glutenFree como uma chave e armazenar isGlutenFree como um
valor, ter lactoseFree como uma chave e armazenar nosso valor atual do
estado isLactoseFree.
Fazemos o mesmo para o vegan com isVegan e fazemos o mesmo para isVegetarian e isVegetarian,
assim e, posteriormente, eu consolarei o registro desse filtro aplicado.
Agora, gostaria de dar acesso a essa função, que faz parte do meu componente, às minhas opções de navegação, para que eu possa
acionar essa função de dentro das opções de navegação e, para isso, podemos usar
parâmetros.
Vamos adicionar o efeito use para que possamos executar o código sempre que nosso estado
for alterado, porque é nesse momento que desejo encaminhar essa função atualizada, que basicamente captura meu estado atual para as minhas opções
de navegação.
Então, aqui, eu posso adicionar use effect e use effect assume uma função que é
executada sempre que nosso estado é alterado e qualquer que seja o componente renderizado novamente, e agora podemos usar os parâmetros de conjunto de navegação props.
Não usamos parâmetros definidos
antes, apenas trabalhamos com get param.
Não usamos parâmetros definidos porque, antes de configurá-los quando navegamos para uma nova tela, por exemplo, como
na tela de categorias, passamos nossos parâmetros dessa maneira para a nova tela, mas podemos usar parâmetros
para atualizar os parâmetros valores para a tela atualmente carregada. Agora, aqui nesta tela, não temos parâmetros, por isso está
vazio; portanto, podemos definir parâmetros para
um novo objeto aqui e quero adicionar uma entrada lá, mas você pode
adicionar quantos quiser.
Quero adicionar uma chave de salvamento e você pode pegar qualquer nome para a chave que deseja e apontar para salvar
filtros, portanto, nesta função. Eu não executo a função,
não adiciono parênteses,
apenas aponto para ela, apenas uso essa variável que mantém um ponteiro nessa função no final e encaminhar
esse valor; portanto, encaminhe esse ponteiro ou armazene esse ponteiro para essa função na chave de salvar,
naquele objeto que agora defini como parâmetros nesta tela, na tela de filtros.
Isso nos permite ir para as opções de navegação e aí temos acesso aos
dados de navegação e, portanto, à navegação correta, o que significa que aqui para o botão salvar, ao pressionar isso, podemos realmente
usar navData. navegação. getParam, é
assim que podemos recuperar um parâmetro e também está disponível aqui nas opções de navegação,
save e eu posso recuperar esse parâmetro save que estou definindo aqui em uso e sei que isso é super estranho na primeira vez que
você vê isso e parece um hack muito sujo, mas não é.
Essa é uma maneira válida de se comunicar entre o componente e as opções de navegação que você
normalmente precisa ao ter itens de ação nas opções de navegação.
Isso nos dará acesso aos nossos parâmetros e lá acessamos o parâmetro save, o parâmetro save será esta função e atualizamos o valor
nesse parâmetro sempre que nosso estado for alterado e precisamos fazer isso porque nessa função,
isso é recriado sempre que nosso estado muda e registra os valores mais recentes, e
é claro que
é isso que queremos quando essa função é executada eventualmente com a ajuda
de parâmetros através desse botão nas opções de navegação.
Portanto, usamos parâmetros como um meio de comunicação entre nosso componente e as opções
de navegação, como uma solução alternativa, mas, de fato, o que você encontra nos documentos
oficiais e a maneira como você se comunica aqui. Agora, antes de salvarmos isso, há duas coisas que precisamos fazer, o use
effect agora é executado sempre que esse componente é atualizado. No final, ele deve ser executado apenas quando os filtros de salvamento tiverem um novo valor.
Então, adicionarei o segundo argumento para usar o efeito, que é esse conjunto de dependências, e salve os filtros. Portanto, essa
variável que contém uma função é uma
dependência e, no momento, isso sempre será reconstruída quando
o componente for reconstruído, por isso não é realmente uma dependência que nos ajuda,
mas em breve corrigiremos isso e props também é uma dependência. Agora, para evitar renderizações desnecessárias sempre que algo
no componente param for
alterado, usarei uma maneira diferente de extrair meu suporte de navegação, usarei a desestruturação aqui, assim, a navegação é igual a
adereços.
Esta é uma sintaxe que usa a destruição de objeto, o que significa que props é um objeto e isso puxa a tecla de navegação e a
armazena em uma constante constante do mesmo nome, para a mesma navegação. Ele armazena o valor no suporte de
navegação nessa constante de navegação agora, é isso que
a sintaxe faz e as vantagens que agora temos uma constante de navegação aqui que podemos usar no efeito
de uso sem acessórios, porque temos isso armazenado em uma constante separada agora e agora podemos adicionar
isso como uma dependência, o que significa que, quando isso mudar,
isso será reconstruído, mas se algo mais nos objetos mudar, isso não executará desnecessariamente o efeito.
Agora, para garantir que os filtros salvos sejam atualizados somente quando nosso estado for alterado, podemos importar o uso de gancho
de retorno de chamada do React, outro gancho incorporado ao React
e isso nos permite agrupar uma função para que essa função seja realmente armazenada em cache pelo
React e seja recriada apenas se suas dependências mudaram.
Envolvemos isso em torno de nossas funções de salvar filtros, assim, assim, passamos essa função como argumento para usar
o retorno de chamada e o
retorno de chamada também recebe um segundo argumento, que é uma matriz de dependências, e
precisamos especificar todas
as dependências que temos aqui isso poderia mudar e isso nos levaria a recriar essa função, e esse
é essencialmente o caso se um dos quatro estados aqui mudar. Portanto, isGlutenFree, isLactoseFree, isVegan e isVegetarian agora são todas dependências de retorno de
chamada de uso e isso significa que essa função de componente aqui será recriada se
algum desses estados mudar, se algo
mais fizer com que esse componente seja renderizado novamente, não iremos recriar isso e isso, por sua vez,
é importante porque essa função de salvar filtros é uma dependência do efeito de uso.
Portanto, se isso for recriado, use o efeito novamente, que atualiza nossos parâmetros, e queremos manter isso no mínimo
e não atualizar constantemente nossos parâmetros, mas realmente só o fazemos se for necessário.
Com isso, agora devemos pressionar o botão Salvar e ver os filtros que escolhemos, então
vamos aos filtros aqui e
agora isso quebra.
Você tem alguma idéia de por que isso iria quebrar?
O problema é que tenho uma navegação aqui como efeito de dependência no uso e expliquei por que tenho, certo, que não quero
ter adereços na sua totalidade e assim por diante. Um problema é que, quando chamamos de parâmetros fixos,
adicionamos novos parâmetros ao nosso navegador no final e o que isso também faz é causar alterações na
navegação.
Então, no final, eu tenho um loop infinito aqui.
Se eu remover a navegação aqui como uma dependência, isso funcionará. Se agora salvarmos isso, agora, se você
fechar os dois aplicativos aqui com a ajuda dos gerenciadores de tarefas e depois reiniciá-lo nos
dois sistemas operacionais, verá que agora isso realmente funciona e você pode clicar em salvar aqui, agora o que você
deseja ' Não verá a saída no log aqui.
No entanto, isso faz muito sentido, porque se você olhar mais de perto esses botões de salvar em
nosso cabeçalho, o que estou fazendo aqui no onPress é que, no final, estou executando esta função, mas o que isso faz?
Ele recupera nossos parâmetros salvos na ou salvos na chave de salvamento e o
que é isso?
Bem, como mencionado anteriormente, um ponteiro na função de salvar filtros, então recuperamos esse ponteiro.
Se não fizermos nada com esse ponteiro, não faremos nada.
Esse é um ponteiro para uma função, então é claro que precisamos executá-lo dessa maneira adicionando parênteses.
Como alternativa, simplesmente nos livramos dessa função de seta anônima aqui e ligamos onPress ao resultado
de recuperar nosso ponteiro aqui dessa maneira, porque esse ponteiro na função será executado para nós quando
pressionarmos isso, essa é
a alternativa.
Então agora, se salvarmos isso e, portanto, deixarmos isso recarregar e voltarmos
aos filtros, se eu clicar em salvar aqui, agora veremos uma saída no log, vamos rolar um pouco aqui, tudo
está definido como falso.
Se eu agora definir lactoseFree e vegetariano como verdadeiro e clicar em salvar, veremos outro
log e, de fato, vegetariano e lactoseFree serão definidos como verdadeiro, exatamente o que tenho aqui.
Então, agora que está funcionando, vamos confirmar que também funciona no Android, indo para os filtros lá também,
vamos definir lactoseFree como verdadeiro e salvar isso e, se o fizermos, essa é
a nossa saída do
Android aqui, lactoseFree é verdade, tudo o
resto é falso , agora isso também funciona.
Portanto, essa solução alternativa pode ser um pouco difícil de entender e evitar esse loop
infinito aqui também
é importante, certifique-se de que você usará o retorno de chamada aqui para evitar reconstruções desnecessárias dessa função aqui também
é algo que você deve fazer. atualize os parâmetros e, portanto, esse componente será reconstruído, você
também não reconstruirá essa função e, portanto, também entrará em um loop infinito.
Mas com isso, temos uma maneira de nos comunicar entre as opções de componente e navegação, que
normalmente é um padrão necessário quando você possui itens de ação em sua barra de ação e deseja acionar algo
que depende dos dados gerenciados em seu componente com a ajuda desses botões.