Ahora con los filtros renderizados aquí, por supuesto, sería bueno tener un botón de guardar aquí en la parte
superior que nos permita guardar cualquier cambio en los filtros que hicimos.
Entonces, en la pantalla de filtros, ya tenemos un botón de encabezado en headerLeft, ahora también
quiero tener uno en headerRight, a la derecha de mi encabezado. Entonces headerRight aquí es básicamente el mismo que tenemos aquí,
así que podemos copiar esto aquí porque queremos tener botones de encabezado allí con
un botón, ese será el botón guardar y el icono que podemos usar allí es, por ejemplo, y de Por supuesto, puede
elegir uno diferente, pero aquí, iré con, por ejemplo, guardar y ahora, cuando se presiona, sin embargo,
será un poco complicado. Por supuesto, podemos activar
una función y podríamos consolar los filtros para guardar registros aquí.
Ahora, la lógica real para guardar y aplicar filtros es algo de lo que nos ocuparemos en el
próximo módulo, pero aún así, hay algún problema con eso.
Si lo guardo así y vamos a los filtros, por supuesto,
podemos presionar esto, esto funciona, pero lo que sería bueno es que realmente reunimos nuestro estado actual de filtros, así que básicamente obtenga una instantánea de nuestro estado actual aquí
y por el momento, registre esto en la consola, en el siguiente módulo aplique esto de alguna manera para
filtrar las recetas que mostramos en las otras pantallas. Ahora esto puede sonar trivial, pero tendremos un problema aquí, nuestros
filtros, por lo que la
información, qué filtros están configurados, todo está almacenado en estas variables de estado aquí, correcto y eso es parte de nuestro componente,
nuestro botón, sin embargo, está en
la navegación opciones y sí, allí obtenemos los
datos de ajuste que, por ejemplo, nos dan el apoyo de navegación al final, pero lo que no
tenemos aquí es el acceso al estado de nuestro componente y eso es lo que necesito
aquí, y ahora esto es realmente es un patrón importante que podría parecer un truco
extraño o solución alternativa, pero que es la forma de comunicarse realmente entre sus opciones de navegación y su componente si depende de cambiar los datos en su
componente dentro de sus opciones de navegación. Entonces, en las opciones
de navegación, necesita información sobre los datos que cambiaron en su componente.
Por cierto, este es un enfoque que se encuentra en los documentos oficiales de navegación. Podemos usar parámetros, para que pasemos entre
pantallas, para comunicarnos entre nuestro componente y las opciones de navegación y esto puede
sonar extraño, pero esto es exactamente lo que haremos ahora.
Digamos aquí en nuestro componente, agregamos una nueva función y nombraré esta función aquí para guardar
filtros, puede nombrarla como desee.
Es una función que no toma argumentos, pero
que tiene un trabajo, creará una constante de filtros aplicados, por ejemplo, que es un objeto que reúne nuestros filtros.
Entonces, podríamos tener glutenFree como clave y almacenar isGlutenFree como
valor, tenemos lactosaFree como clave y almacenar nuestro valor de estado
actual isLactoseFree.
Hacemos lo mismo para vegan con isVegan y hacemos lo mismo para isVegetarian y isVegetarian, de esa manera y,
a partir de entonces, voy a consolar el registro de este filtro aplicado.
Ahora la cuestión es que me gustaría dar acceso a esta función que es parte de mi componente a mis opciones de navegación para poder
activar esta función desde dentro de las opciones de navegación y para esto, podemos usar
parámetros.
Agreguemos el efecto de uso para que tengamos una forma de ejecutar código cada vez
que nuestro estado cambie porque es cuando quiero reenviar esta función actualizada que básicamente captura mi estado actual en mis opciones
de navegación.
Entonces, aquí, puedo agregar el efecto de uso y el efecto de uso toma una función que se
ejecuta cada vez que cambia nuestro estado y cualquiera que sea el componente que se vuelve a generar y, allí, ahora podemos usar parámetros de conjunto de navegación de accesorios.
No hemos usado set
params antes, solo trabajamos con get param.
No utilizamos parámetros establecidos porque antes solo establecimos parámetros cuando navegamos a una nueva pantalla, luego, por ejemplo, como
en la pantalla de categorías, pasamos nuestros parámetros de esta manera a la nueva pantalla, pero podemos usar
parámetros para actualizar los parámetros valores para la pantalla cargada actualmente. Ahora aquí en esta pantalla, no tenemos parámetros, por lo que
está vacío, por lo tanto, podemos
establecer parámetros para un objeto nuevo aquí y quiero agregar una entrada allí, pero puede
agregar tantos como desee.
Quiero agregar una tecla de guardar y puede tomar cualquier nombre para esa tecla que desee y apuntar a guardar filtros, así
que en esta función. No ejecuto la función, no agrego
paréntesis, solo lo
señalo, solo uso esta variable que contiene un puntero en esta función al final y reenvío este valor, así
que reenvíe este puntero o almacene este puntero en esa función en esa tecla de guardar, en ese
objeto que ahora configuro como parámetros en esta pantalla, en la pantalla de filtros.
Esto nos permite ir a las opciones de navegación y allí tenemos acceso a los datos
de navegación y, por lo tanto, a la navegación hacia la derecha, y eso significa que aquí para el botón Guardar, al presionar esto, en realidad
podemos usar navData. navegación. getParam, así
es como podemos recuperar un parámetro y también está disponible aquí en las opciones de navegación,
guardar y puedo recuperar ese parámetro de guardar que estoy configurando aquí en efecto y sé que esto es súper extraño la primera vez que
ves esto y parece un truco realmente sucio pero no lo es.
Esta es una forma válida de comunicación entre su componente y sus opciones de navegación que normalmente
necesita cuando tiene elementos de acción en sus opciones de navegación.
Esto nos dará acceso a nuestros parámetros y allí accederemos al parámetro de guardar, el parámetro de guardado será esta función y actualizaremos el valor en
ese parámetro cada vez que cambie nuestro estado y tenemos que hacer esto porque en esta
función, esto se recrea cada vez nuestro estado cambia y registra los últimos valores de estado y,
por supuesto, eso es
lo que queremos cuando esta función se ejecute eventualmente con la ayuda de parámetros
a través de ese botón en las opciones de navegación.
Por lo tanto, utilizamos los parámetros como una forma de comunicarnos entre nuestro componente y
las opciones de navegación, como una solución alternativa, pero de hecho, la que también se encuentra en
los documentos oficiales y la forma en que se comunica aquí. Ahora, antes de guardar esto, hay dos cosas que debemos hacer, usar efecto
ahora se ejecuta cada vez que este componente se actualiza. Al final, solo debería ejecutarse cuando los filtros guardados tengan un nuevo valor.
Así que agregaré el segundo argumento para usar el efecto, que es esta matriz de dependencias y allí, guardar filtros, por lo que
esta variable aquí que tiene una función es
una dependencia y en este momento, esto siempre se reconstruirá
cuando se reconstruya el componente, por lo que no es Realmente es una dependencia que nos
ayuda, pero pronto lo arreglaremos y los accesorios también son una dependencia. Ahora, en realidad, para evitar representaciones innecesarias cada vez
que cambie algo en
el componente param, usaré una forma diferente de extraer mi accesorio de navegación, usaré la desestructuración aquí, así, la navegación es igual a los
accesorios.
Esta es una sintaxis que usa la desestructuración de objetos, lo que significa que los accesorios son un objeto y esto saca la tecla de navegación y la almacena en
una constante nueva del mismo nombre, por lo tanto, de la misma navegación. Almacena el valor en el accesorio de navegación
en esa constante de navegación ahora, eso es lo
que hace la sintaxis y las ventajas de que ahora tenemos una constante de navegación aquí que podemos usar
en efecto sin accesorios porque tenemos esto almacenado en una constante separada ahora y ahora podemos agregar esto
como una dependencia, lo que significa que cuando esto cambie, esto se
reconstruirá, pero si algo más en los accesorios cambia, esto no volverá a ejecutar el efecto innecesariamente.
Ahora, para asegurarnos de que los filtros guardados solo se actualicen cuando nuestro estado cambie, podemos importar el uso del
enganche de devolución de llamada de React, otro enganche incorporado en
React y esto nos permite ajustar una función para que React realmente almacene esta función y solo
se vuelva a crear si sus dependencias cambiaron
Envolvemos esto alrededor de nuestras funciones de guardar filtros, así, así que pasamos esta función como un argumento para usar
la devolución de llamada y usar la
devolución de llamada también toma un segundo argumento que es una matriz de dependencias y, allí,
necesitamos especificar todas
las dependencias que tenemos aquí eso podría cambiar y eso nos llevaría a recrear esa función y ese es
esencialmente el caso si uno de los cuatro estados aquí cambia. Entonces isGlutenFree, isLactoseFree, isVegan e isVegetarian ahora son todas dependencias de la devolución
de llamada de uso y eso significa que esta función de componente aquí se volverá a crear
si alguno de estos estados aquí cambia,
si cualquier otra cosa hace que este componente se vuelva a renderizar, no recrearemos esto función y eso a
su vez es importante porque esa función de guardar filtros es una dependencia del efecto de uso.
Entonces, si eso se recrea, use el efecto nuevamente, que actualiza nuestros parámetros y queremos mantener esto al mínimo
y no actualizar constantemente nuestros parámetros, pero realmente solo lo hacemos si necesitamos hacerlo.
Con esto en su lugar, ahora deberíamos poder presionar el botón Guardar y ver los filtros que elegimos, así
que vamos a los filtros aquí y
ahora esto se rompe.
¿Tienes alguna idea de por qué se rompería?
El problema es que tengo una navegación aquí como efecto de dependencia en uso y le expliqué por qué lo tengo, correcto,
que no quiero tener accesorios en su totalidad, etc. Un problema es que, cuando llamamos a los
parámetros
establecidos, agregamos nuevos parámetros a nuestro navegador al final y lo que esto también hace es que cambie
la navegación.
Entonces, al final, tengo un bucle infinito aquí.
Si elimino la navegación aquí como una dependencia, entonces esto funcionará. Si ahora guardamos esto, ahora si
cierra ambas aplicaciones aquí con la ayuda de los administradores de tareas y luego
reinicia eso en ambos sistemas operativos, verá que ahora sí funciona y puede presionar guardar aquí, ahora qué
No veré la salida en el registro aquí.
Sin embargo, eso tiene mucho sentido porque si observa de cerca este botón de guardar en nuestro
encabezado, entonces lo que estoy haciendo aquí en onPress es que finalmente estoy ejecutando esta función, pero ¿qué hace esto?
Recupera nuestros parámetros guardados en o almacenados en la clave de guardar y
¿qué es esto?
Bueno, eso es como se mencionó anteriormente, un puntero en la función de guardar filtros, por lo que recuperamos ese puntero.
Si no hacemos nada con ese puntero, no estamos haciendo nada.
Ese es un puntero en una función, por lo que, por supuesto, debemos ejecutarlo de esta manera agregando paréntesis.
Alternativamente, simplemente nos deshacemos de esta función de flecha anónima aquí y simplemente vinculamos onPress al resultado
de recuperar nuestro puntero aquí de esa manera porque entonces este puntero en la función se ejecutará
cuando presionamos esto, esa es
la alternativa.
Entonces, si guardamos esto y, por lo tanto, dejamos que se vuelva a cargar
y volvemos a los filtros, si presiono guardar aquí, ahora vemos una salida en el registro, avancemos un poco aquí, todo
está configurado como falso.
Si ahora configuro lactosa y vegetariana en verdadero y presiono guardar, vemos otro registro y,
de hecho, vegetariano y sin lactosa se establece en verdadero, que es exactamente lo que tengo aquí.
Entonces, ahora que está funcionando, confirmemos que también funciona en Android yendo a los filtros allí también,
configuremos lactoseFree en verdadero y guarde esto y si lo hacemos, esa es
nuestra salida de Android
aquí, lactoseFree es verdadero, todo lo demás
es falso , ahora esto también funciona.
Por lo tanto, esta solución puede ser un poco difícil de entender y evitar este bucle
infinito aquí también
es importante, asegurándose de que usará la devolución de llamada aquí para evitar reconstrucciones innecesarias de esta función aquí también es
algo que debe hacer, de modo que cuando actualice los parámetros y, por lo tanto, este componente
se reconstruye, no también reconstruye esa función y, por lo tanto, también ingresa un bucle infinito.
Pero con eso, tenemos una forma de comunicarnos entre las opciones de componentes y navegación, que generalmente es
un patrón que necesita cuando tiene elementos de acción en su barra de acciones y desea activar algo que depende
de los datos administrados en su componente con la ayuda de estos botones.