Ora con i filtri renderizzati qui, ovviamente sarebbe bello avere un pulsante di salvataggio qui in alto che ci
consente di salvare tutte le modifiche ai filtri che abbiamo fatto.
Quindi nella schermata dei filtri, abbiamo già un pulsante di intestazione su headerLeft, ora voglio
anche averne uno su headerRight, quindi a destra della mia intestazione. Quindi headerRight qui è fondamentalmente lo stesso di quello qui,
quindi possiamo semplicemente copiarlo qui perché vogliamo avere i pulsanti di intestazione lì con
un pulsante, che sarà il pulsante di salvataggio e l'icona che possiamo usare lì è ad esempio e di Ovviamente puoi
sceglierne uno diverso ma qui, andrò ad esempio con il salvataggio e ora quando questo viene premuto,
sarà un po 'complicato. Naturalmente, possiamo attivare una
funzione e possiamo consolare i filtri di salvataggio del registro qui.
Ora la logica effettiva per il salvataggio e l'applicazione dei filtri è qualcosa di cui ci
occuperemo nel modulo successivo, ma c'è ancora qualche problema.
Se lo salvo in questo modo e andiamo ai filtri,
ovviamente possiamo premere questo, questo funziona ma ciò che sarebbe bello è che poi raccogliamo davvero il nostro stato attuale di filtri, quindi fondamentalmente otteniamo un'istantanea del nostro
stato attuale qui e per il momento registralo sulla console, nel modulo successivo applica questo in qualche modo per
filtrare le ricette che stiamo mostrando sugli altri schermi. Ora questo può sembrare banale ma avremo un problema qui, i
nostri filtri, quindi le informazioni,
quali filtri sono impostati, sono tutte memorizzate in queste variabili di stato qui, a destra e fa parte del nostro componente,
il nostro pulsante è comunque nella
navigazione opzioni e sì, lì otteniamo i dati
istantanei che, ad esempio, ci danno il sostegno alla navigazione alla fine, ma ciò che non abbiamo
qui è l'accesso allo stato del nostro componente e questo è ciò di cui ho bisogno
qui e ora questo qui è davvero un modello importante che potrebbe apparire come uno
strano hack o soluzione alternativa ma che è il modo di comunicare effettivamente tra le opzioni di navigazione e il componente se si dipende dalla modifica dei dati
nel componente all'interno delle opzioni di navigazione. Pertanto, nelle opzioni di
navigazione, sono necessarie informazioni sui dati modificati nel componente.
Questo è anche un approccio che trovi tra i documenti ufficiali della navigazione. Possiamo usare i parametri, così quella cosa che
passiamo tra le schermate, per comunicare tra il nostro componente e le opzioni di navigazione e questo
potrebbe sembrare strano ma questo è esattamente ciò che faremo ora.
Diciamo qui nel nostro componente, aggiungiamo una nuova funzione e chiamerò questa funzione qui salvando i
filtri, puoi nominarla come vuoi.
È una funzione che non accetta argomenti ma che
ha un lavoro, creerà una costante di filtri applicati, ad esempio che è un oggetto che raccoglie i nostri filtri.
Quindi lì potremmo avere glutenFree come chiave e memorizziamo isGlutenFree come
valore, abbiamo lattosioFree come chiave e memorizziamo il nostro attuale valore di
stato isLactoseFree.
Facciamo lo stesso per i vegani con isVegan e facciamo lo stesso per isVegetarian e isVegetarian, come quello
e in seguito, consolerò il log di questa cosa sui filtri applicati.
Ora il fatto è che vorrei dare accesso a questa funzione che è parte del mio componente per le mie opzioni di navigazione in modo
da poter attivare questa funzione dall'interno delle opzioni di navigazione e per questo, possiamo usare i
parametri.
Aggiungiamo l'effetto d'uso in modo da avere un modo di eseguire il codice ogni volta che
il nostro stato cambia perché è quando voglio inoltrare questa funzione aggiornata che sostanzialmente cattura il mio stato corrente alle mie opzioni
di navigazione.
Quindi, qui, posso aggiungere l'effetto use e use effect prende una funzione che viene eseguita ogni volta
che il nostro stato cambia e qualunque sia il componente renderizzato nuovamente e lì dentro, ora possiamo usare i parametri del set di navigazione degli oggetti di scena.
Non abbiamo mai usato set
params prima, abbiamo lavorato solo con get param.
Non abbiamo usato set params perché prima abbiamo impostato params solo quando siamo passati a una nuova schermata, quindi ad
esempio come nella schermata delle categorie, abbiamo passato i nostri parametri in questo modo alla nuova schermata ma possiamo usare
set params per aggiornare i parametri valori per la schermata attualmente caricata. Ora qui su questa schermata, non abbiamo parametri, quindi è vuoto,
quindi possiamo impostare i parametri su
un oggetto nuovo di zecca qui e voglio aggiungere una voce lì, ma puoi
aggiungerne quanti ne vuoi.
Voglio aggiungere una chiave di salvataggio e puoi prendere qualsiasi nome per quella chiave che desideri e puntare su filtri di salvataggio,
quindi con questa funzione. Non eseguo la funzione, non aggiungo
parentesi, mi limito
a indicarlo, utilizzo solo questa variabile che contiene un puntatore a questa funzione alla fine e inoltro questo
valore, quindi inoltra questo puntatore o memorizza questo puntatore in quella funzione in quella chiave di salvataggio, in
quell'oggetto che ora imposto come parametri in questa schermata, nella schermata dei filtri.
Questo ci consente di andare alle opzioni di navigazione e lì abbiamo accesso ai dati
di navigazione e quindi alla navigazione a destra e ciò significa che qui per il pulsante di salvataggio, quando si preme questo, possiamo effettivamente
utilizzare navData. navigazione. getParam, è
così che possiamo recuperare un parametro ed è disponibile anche qui nelle opzioni di navigazione,
salva e posso recuperare quel parametro di salvataggio che sto impostando qui in uso effetto e so che è super strano la prima volta che
vedi questo e sembra un trucco davvero sporco ma non lo è.
Questo è un modo valido di comunicare tra il componente e le opzioni di navigazione che in genere
è necessario quando si hanno elementi di azione nelle opzioni di navigazione.
Questo ci consentirà di accedere ai nostri parametri e lì accediamo al parametro save, il parametro save sarà questa funzione e aggiorneremo il valore
in quel parametro ogni volta che il nostro stato cambia e dobbiamo farlo perché in questa
funzione, questo viene ricreato ogni volta il nostro stato cambia e registra gli ultimi valori di
stato e questo è
ovviamente ciò che vogliamo quando questa funzione viene eseguita alla fine con l'aiuto
di parametri attraverso quel pulsante nelle opzioni di navigazione.
Quindi usiamo params come un modo di comunicare tra il nostro componente e le
opzioni di navigazione, una sorta di soluzione alternativa, ma in effetti, quello che trovi anche
nei documenti ufficiali e il modo in cui comunichi qui. Ora, prima di salvarlo, ci sono due cose che dobbiamo fare però, usare
effect adesso funziona ogni volta che questo componente si aggiorna. Alla fine, dovrebbe essere eseguito solo quando i filtri di salvataggio contengono un nuovo valore.
Quindi aggiungerò il secondo argomento per usare l'effetto che è questo array di dipendenze e lì, salvare i filtri, quindi questa variabile
qui che contiene una funzione è una dipendenza
e in questo momento, questo verrà sempre ricostruito quando si
ricostruisce il componente, quindi non lo è davvero una dipendenza che ci aiuta, ma ripareremo
presto questo e anche gli oggetti di scena sono una dipendenza. Ora, in realtà, per evitare ri-rendering non necessari ogni
volta che qualcosa nel
componente param cambia, userò un modo diverso di estrarre il mio puntello di navigazione, userò la destrutturazione qui, in questo modo, la navigazione è uguale
a puntelli.
Questa è una sintassi che usa la destrutturazione degli oggetti, il che significa che oggetti di scena è un oggetto e questo estrae la chiave di navigazione e la
memorizza in una costante nuova con lo stesso nome, quindi della stessa navigazione. Memorizza ora il valore nel puntello di
navigazione in quella costante di navigazione, questo è ciò
che fa la sintassi e i vantaggi che ora abbiamo una costante di navigazione qui che possiamo usare in
uso senza effetti puntelli perché ora li abbiamo memorizzati in una costante separata e ora possiamo aggiungere
questo come una dipendenza, il che significa che quando questo cambia,
questo verrà ricostruito ma se qualcos'altro cambia negli oggetti di scena, questo non eseguirà inutilmente l'effetto.
Ora per essere sicuri che il salvataggio dei filtri si aggiorni solo quando il nostro stato cambia, possiamo importare l'uso dell'hook
di callback da React, un altro hook incorporato in React e questo
ci consente di avvolgere una funzione in modo che questa funzione sia effettivamente memorizzata nella cache da React
e venga ricreata se le sue dipendenze sono cambiate.
Lo avvolgiamo attorno alle nostre funzioni di salvataggio dei filtri, proprio in questo modo, quindi passiamo questa funzione
come argomento per usare il callback
e usare il callback prende anche un secondo argomento che è un array di dipendenze
e lì, dobbiamo
specificare tutte le dipendenze che abbiamo qui ciò potrebbe cambiare e ciò ci porterebbe a ricreare quella funzione
e ciò accade essenzialmente se uno dei quattro stati qui cambia. Quindi isGlutenFree, isLactoseFree, isVegan e isVegetarian sono ora tutte dipendenze del
callback di utilizzo e ciò significa che questa funzione del componente qui verrà ricreata
se uno di questi stati qui
cambia, se qualcos'altro provoca il rendering del componente, non lo ricreamo e questa è a sua
volta importante perché quella funzione di salvataggio dei filtri è una dipendenza dell'effetto d'uso.
Quindi, se questo viene ricreato, usa di nuovo effect effect che aggiorna i nostri parametri e vogliamo mantenerlo al minimo
e non aggiornare costantemente i nostri parametri, ma lo facciamo davvero solo se dobbiamo farlo.
Con questo in atto, ora dovremmo essere in grado di premere il pulsante Salva e vedere i filtri che abbiamo
scelto, quindi andiamo ai filtri qui e
ora questo si interrompe.
Hai idea del perché si rompa?
Il problema è che qui ho una navigazione come dipendenza nell'effetto d'uso e ho spiegato perché ce l'ho, giusto, che non voglio avere
oggetti di scena nella sua interezza e così via. Un problema è che, quando chiamiamo set params,
alla fine aggiungiamo nuovi parametri al nostro navigatore e ciò che fa anche questo fa cambiare la
navigazione.
Quindi alla fine, ho un ciclo infinito qui.
Se rimuovo la navigazione qui come dipendenza, allora funzionerà. Se ora salviamo questo, ora se
chiudi entrambe le app qui con l'aiuto dei task manager e poi lo
riavvii su entrambi i sistemi operativi, vedrai che ora funziona davvero e puoi premere Salva qui, ora
cosa Non vedrò l'output nel registro qui.
Ciò ha molto senso, perché se dai un'occhiata più da vicino a questi pulsanti di salvataggio
nella nostra intestazione, allora quello che sto facendo qui su onPress è che sto eseguendo questa funzione, ma cosa fa?
Recupera i nostri parametri salvati nella o memorizzati nella chiave di salvataggio e
che cos'è?
Bene, come accennato in precedenza, un puntatore alla funzione Salva filtri, quindi recuperiamo quel puntatore.
Se poi non facciamo nulla con quel puntatore, non stiamo facendo nulla.
Questo è un puntatore a una funzione, quindi ovviamente dobbiamo eseguirlo in questo modo aggiungendo parentesi.
In alternativa, semplicemente ci liberiamo di questa funzione di freccia anonima qui e ci limitiamo a vincolare onPress
al risultato del recupero del nostro puntatore qui in quel modo perché allora questo puntatore alla funzione verrà eseguito
per noi quando lo premiamo, questa
è l'alternativa.
Quindi ora se lo salviamo e quindi lo lasciamo ricaricare e
torniamo ai filtri, se premo salva qui, ora vediamo un output nel registro, scorriamo un po 'qui, tutto
è impostato su falso.
Se ora imposto il lattosio e il vegetariano su true e premo il salvataggio, vediamo un altro log
e lì effettivamente il vegetariano e il lattosio è impostato su true, che è esattamente quello che ho qui.
Quindi ora che funziona, confermiamo che funziona anche su Android andando a filtrare anche lì, impostiamo lactoseFree
su true e salviamo questo e se lo facciamo, questo è il nostro
output Android qui, lattactFree
è vero, tutto il resto è
falso , quindi ora funziona anche questo.
Quindi questa soluzione alternativa può essere un po 'complicata per avvolgere la testa ed evitare
anche questo loop
infinito qui è importante, assicurarti che utilizzerai la richiamata qui per evitare ricostruzioni inutili di questa funzione anche qui
è qualcosa che dovresti fare, in modo che quando aggiorna i parametri e quindi questo componente
ricostruisce, non ricostruisci anche quella funzione e quindi inserisci anche un ciclo infinito.
Ma con ciò, abbiamo un modo di comunicare tra il componente e le opzioni di navigazione che è
in genere un modello di cui hai bisogno quando hai elementi di azione nella barra delle azioni e vuoi attivare qualcosa
che dipende dai dati gestiti nel tuo componente con l'aiuto di questi pulsanti.