¿Cómo podemos resolver el problema que aquí necesitamos para encontrar una comida específica y realmente no podemos usar nuestro
selector aquí en las opciones de navegación?
Ahora hay dos soluciones posibles: la solución número uno es que volvemos a usar los viejos y buenos parámetros
para comunicarnos entre las opciones de
componentes y navegación como lo mostré en el módulo de navegación. Aquí en el componente, estamos cargando nuestra comida, así que, por
supuesto, aquí podemos usar los parámetros de configuración de navegación de accesorios y ahora establecer los parámetros a un nuevo valor aquí y ahora podemos usar los
parámetros establecidos para reenviar la comida seleccionada o su título al encabezado y lo que establezca aquí es params, por
cierto, se fusionará con los params existentes, por lo que esto no los anulará, por lo que
no anulará su comidaId que está recuperando aquí, que todavía estará allí, solo está agregando
algo nuevo, solo está anulando un parámetro si ya existe en los parámetros.
Entonces, aquí, podríamos agregar la clave del título de la comida y establecerla en la comida seleccionada. título.
Ahora, esto significa que envié estos parámetros a mi encabezado cuando este componente se procesa al final.
Ahora, dado que esto cambiará los accesorios, generalmente terminaríamos en un bucle infinito, por
lo que para romper esto, usaremos el efecto de uso aquí como
lo mostré en el módulo de navegación y lo haremos dentro del efecto de uso.
Entonces, aquí podemos usar el efecto de uso y,
como dependencia, especificaré una matriz vacía por ahora y luego estableceré parámetros aquí dentro de la función de efecto de
uso y
no tendré una matriz vacía aquí, en cambio, mi dependencia aquí es mi seleccionada comida.
Cuando eso cambie, quiero reenviar la nueva información al encabezado. Ahora veremos si eso funciona, vamos al encabezado y
allí podemos
recuperar eso de los parámetros.
Así que aquí tengo el título de mi
comida, puedo obtener esto con navigationData. navegación. título de la comida getParam, ese
fue el nombre que elegí al configurar los parámetros aquí.
Ahora, con el título de
la comida seleccionado aquí, podemos establecer el título del encabezado para ese título de comida y comentar esta línea porque no funcionará
de todos modos y vamos a intentarlo.
Guardemos esto y vayamos a la página de detalles y mientras esto
funciona, verán un problema. Cuando esto se carga, inicialmente no hay título y esto
solo aparece después de un tiempo.
Entonces, solo después de que esto esté completamente cargado, vemos que el título emergente no es
demasiado hermoso y la razón de
esto simplemente es que nuestra lógica aquí funciona, pero dado que el efecto de uso se ejecuta después
de que el componente se haya procesado por primera vez, esperamos para que el componente se procese
por primera vez hasta que enviemos los parámetros al título y eso significa que cuando esta transición todavía se está
reproduciendo y la representación no se ha completado por completo, en realidad no estamos mostrando ese título.
Es por eso que esta podría no ser
la solución óptima aquí y comentaré esto. Una mejor solución aquí, tan barata como puede
parecer, pero que también es una solución que a menudo puede usar, es que simplemente reenvíe el título
que necesitaremos aquí desde el componente del que proviene, para que lo cargue cuando está en el componente que
irá a este componente y lo envía a este componente antes de que se cargue.
Entonces, enviemos los datos por adelantado y venimos de la pantalla de favoritos
o de la pantalla de categoría de comida. Allí, al final tocamos un elemento en la lista de comidas y en ambos elementos,
en ambos componentes, pantalla de favoritos y pantalla de comidas de categoría, estamos usando la lista de comidas,
lo cual es bueno porque eso significa que podemos ir a la lista de comidas aquí y allí, tenemos esta acción de navegación y ahora simplemente,
además de pasar la identificación de la comida, sería bueno si ya pasamos el título de la comida porque aquí la tenemos disponible, ¿verdad?
itemData. articulo. título, ese es nuestro título de la comida. Simplemente suministrándolo aquí, resolvemos todos los
problemas que tenemos en la otra pantalla, así que ese es definitivamente el enfoque que queremos usar aquí.
Entonces, al establecer ese parámetro aquí en el componente donde activamos esa acción de navegación a la página de detalles de
la comida, solucionamos este problema porque ahora ves que el título está allí desde el principio y no tenemos ningún problema,
por supuesto. también en Android si lo probamos allí. Mi emulador es un poco
lento, pero generalmente también puedes verlo allí. Así es como podemos trabajar con datos en
el encabezado cuando lo necesitamos de Redux y con eso, tenemos un primer estado sólido, podemos usar
nuestros datos de Redux. Lo que realmente no podemos hacer es
cambiarlo, así que ese es el siguiente paso, queremos agregar algo de lógica para que podamos cambiar los datos, que
podamos marcar favoritos y que podamos filtrar nuestros datos.