1 00:00:02,170 --> 00:00:10,150 Come possiamo risolvere quel problema di cui qui abbiamo bisogno per trovare un pasto specifico e non possiamo davvero usare il 2 00:00:10,600 --> 00:00:13,600 nostro selettore qui nelle opzioni di navigazione? 3 00:00:13,600 --> 00:00:19,960 Ora ci sono due possibili correzioni: la correzione numero uno è che usiamo di nuovo i vecchi parametri per 4 00:00:19,990 --> 00:00:22,190 comunicare tra il componente e le 5 00:00:22,210 --> 00:00:29,470 opzioni di navigazione, come ho mostrato nel modulo di navigazione. Qui nel componente, stiamo caricando il nostro pasto, quindi ovviamente 6 00:00:29,470 --> 00:00:37,310 qui possiamo usare i parametri di navigazione dei puntelli e ora impostare i parametri su un nuovo valore qui e ora possiamo usare i parametri per 7 00:00:37,310 --> 00:00:43,300 inoltrare il pasto selezionato o il suo titolo all'intestazione e qualunque cosa tu abbia impostato qui è che i parametri 8 00:00:43,300 --> 00:00:48,340 saranno uniti ai parametri esistenti, quindi questo non li sovrascriverà, quindi non sovrascriverai il tuo pasto, 9 00:00:48,340 --> 00:00:52,630 se ciò che stai recuperando qui, sarà ancora lì, sei solo aggiungendo qualcosa di 10 00:00:52,870 --> 00:00:56,840 nuovo, hai la precedenza su un parametro solo se esiste già nei parametri. 11 00:00:56,920 --> 00:01:04,030 Quindi qui, potremmo aggiungere la chiave del titolo del pasto e impostarlo sul pasto selezionato. titolo. 12 00:01:04,050 --> 00:01:13,120 Ora questo significa che ho inviato questi parametri alla mia intestazione quando questo componente viene visualizzato alla fine. 13 00:01:15,800 --> 00:01:20,270 Ora poiché questo cambierà gli oggetti di scena, di solito finiremo in 14 00:01:20,270 --> 00:01:24,710 un ciclo infinito, quindi per romperlo, useremo l'effetto use qui come 15 00:01:24,800 --> 00:01:29,780 l'ho mostrato nel modulo di navigazione e lo facciamo effettivamente all'interno dell'effetto use. 16 00:01:29,780 --> 00:01:32,690 Quindi qui possiamo usare use effect e come 17 00:01:35,230 --> 00:01:41,430 dipendenza, per ora specificherò un array vuoto e quindi impostare i parametri qui all'interno della funzione use effect e 18 00:01:41,440 --> 00:01:42,320 non avrò 19 00:01:42,520 --> 00:01:47,290 un array vuoto qui, invece la mia dipendenza qui è la mia selezionata pasto. 20 00:01:47,290 --> 00:01:55,150 Quando ciò cambia, voglio inoltrare le nuove informazioni all'intestazione. Ora vedremo se funziona, andiamo all'intestazione e 21 00:01:55,150 --> 00:01:56,250 ora 22 00:01:56,350 --> 00:01:59,050 possiamo recuperarlo dai parametri. 23 00:01:59,050 --> 00:02:01,720 Quindi qui ho il titolo del mio 24 00:02:02,080 --> 00:02:09,240 pasto, posso ottenerlo con navigationData. navigazione. Titolo del pasto getParam, quello era 25 00:02:09,240 --> 00:02:12,660 il nome che ho scelto quando ho impostato i parametri qui. 26 00:02:19,700 --> 00:02:21,590 Ora con il titolo 27 00:02:21,590 --> 00:02:28,190 del pasto selezionato qui, possiamo impostare il titolo dell'intestazione sul titolo del pasto e commentare questa riga perché 28 00:02:28,200 --> 00:02:30,140 non funzionerà comunque e proviamo. 29 00:02:30,140 --> 00:02:35,660 Salviamo questo e andiamo alla pagina dei dettagli e mentre 30 00:02:35,660 --> 00:02:40,410 funziona, vedrai un problema. Quando questo viene caricato, inizialmente non esiste un titolo e 31 00:02:40,430 --> 00:02:42,140 questo compare solo dopo un po '. 32 00:02:42,140 --> 00:02:47,350 Quindi solo dopo che questo è stato completamente caricato, vediamo quel pop del titolo in 33 00:02:47,360 --> 00:02:49,530 cui non è troppo bello e 34 00:02:49,790 --> 00:02:55,340 la ragione di ciò è semplicemente che la nostra logica qui funziona ma poiché l'effetto use viene 35 00:02:55,340 --> 00:03:00,770 eseguito dopo il rendering del componente per la prima volta, aspettiamo per il rendering del componente per 36 00:03:00,770 --> 00:03:06,980 la prima volta fino a quando non inviamo i parametri al titolo e ciò significa che quando questa transizione è 37 00:03:06,980 --> 00:03:12,400 ancora in esecuzione e il rendering non è stato completamente completato, non stiamo davvero mostrando quel titolo. 38 00:03:12,680 --> 00:03:15,630 Ecco perché questa potrebbe non essere la 39 00:03:15,650 --> 00:03:20,960 soluzione ottimale qui e lo commenterò. Una soluzione migliore qui, per quanto economica 40 00:03:21,060 --> 00:03:26,310 possa sembrare ma che è anche una soluzione che puoi spesso usare, è semplicemente inoltrare il titolo 41 00:03:26,310 --> 00:03:31,800 di cui avremo bisogno dall'interno del componente da cui provieni, in modo da caricarlo quando sei nel componente 42 00:03:31,800 --> 00:03:36,510 che andrà a questo componente e lo invierai a questo componente prima che sia caricato. 43 00:03:36,510 --> 00:03:42,090 Quindi inviamo i dati in anticipo e veniamo dalla schermata dei preferiti 44 00:03:42,090 --> 00:03:49,880 o dalla schermata dei pasti di categoria. Lì, stiamo alla fine toccando un elemento nell'elenco dei pasti e in entrambi gli 45 00:03:49,890 --> 00:03:54,240 elementi, in entrambi i componenti, la schermata preferita e la schermata dei pasti di categoria, stiamo usando 46 00:03:54,240 --> 00:04:00,420 l'elenco dei pasti che è buono perché ciò significa che possiamo andare all'elenco dei pasti qui e lì, abbiamo questa azione di navigazione e ora 47 00:04:00,420 --> 00:04:06,330 semplicemente oltre a passare l'ID del pasto, sarebbe bene se qui passassimo già il titolo del pasto perché qui lo abbiamo disponibile, giusto? 48 00:04:06,540 --> 00:04:13,350 itemData. articolo. titolo, questo è il nostro titolo del pasto. Fornendolo semplicemente qui, risolviamo tutti 49 00:04:13,350 --> 00:04:17,950 i problemi che abbiamo sull'altro schermo, quindi questo è sicuramente l'approccio che vogliamo usare qui. 50 00:04:18,090 --> 00:04:24,060 Quindi impostando quel parametro qui sul componente in cui attiviamo l'azione di navigazione sulla pagina dei dettagli del pasto, 51 00:04:24,060 --> 00:04:30,270 abbiamo risolto questo problema perché ora vedi il titolo è lì fin dall'inizio e non abbiamo alcun problema e lo 52 00:04:30,270 --> 00:04:36,180 stesso ovviamente anche su Android se ci proviamo. Il mio emulatore è solo un 53 00:04:36,180 --> 00:04:43,380 po 'lento ma generalmente lo puoi vedere anche lì. Quindi è così che possiamo lavorare con i dati nell'intestazione 54 00:04:43,380 --> 00:04:50,850 quando ne abbiamo bisogno da Redux e con quello, abbiamo un primo stato solido, siamo in grado di usare 55 00:04:50,850 --> 00:04:54,830 i nostri dati Redux. Ciò che non siamo davvero in grado di 56 00:04:54,900 --> 00:04:59,790 fare è cambiarlo, quindi questo è il prossimo passo, vogliamo aggiungere un po 'di logica in modo da poter cambiare i dati, che possiamo 57 00:04:59,880 --> 00:05:01,890 contrassegnare i preferiti e che possiamo filtrare i nostri dati.