Incorporación de enlaces

  • 2 minutos

Puede usar el enlace Effect para supervisar el estado de la aplicación y ejecutar código en respuesta a las actualizaciones. Registramos la función que queremos ejecutar en respuesta a los cambios mediante el uso de useEffect.

Escenario

Nuestra aplicación permite al usuario pulsar en elementos individuales para marcarlos como preparados. Si aún no se han preparado algunos elementos, queremos mostrar el mensaje Siga cortando. Una vez finalizados todos los elementos, queremos mostrar Trabajo de preparación terminado.

Configuraremos este comportamiento agregando un nuevo objeto de estado. Actualizaremos el objeto desde el enlace Effect.

Importante

En nuestro ejemplo, modificamos el estado en useEffect. De forma predeterminada, useEffect se ejecuta siempre que se modifique cualquier objeto con estado. Este comportamiento puede crear un bucle sin fin. En este bucle, modificamos el estado y se ejecuta el enlace, que modifica el estado, que a su vez ejecuta el enlace, etc.

Para evitar el bucle sin fin, podemos usar el parámetro de dependencia en useEffect a fin de ver solo un objeto. Haremos esto cuando creemos nuestro código.

Incorporación de la propiedad de estado nueva

  1. Abra el archivo App.jsx.

  2. Para agregar la nueva propiedad de estado, inserte el código siguiente debajo de la línea que lee, TODO: Add new state property.

    // TODO: Add new state property
const [ prepared, setPrepared ] = useState(false);

Incorporación del cliente de escucha del enlace Effect

Para agregar el cliente de escucha del enlace Effect, inserte el código siguiente debajo de la línea que lee, TODO: Add the effect hook.

// TODO: Add the effect hook
useEffect(() => {
    setPrepared(recipe.ingredients.every(i => i.prepared));
}, [recipe]);

El código usa setPrepared para actualizar prepared. Usa el método every, que devuelve un valor booleano basado en cada elemento que coincida con los criterios especificados. En nuestro caso, vamos a comprobar si todos los elementos están preparados. En caso contrario, el método devuelve false.

El segundo parámetro en useEffect está establecido en [recipe]. Esta configuración proporciona la dependencia para asegurarse de que nuestro código se ejecuta solo cuando el objeto recipe cambia.

Incorporación de la pantalla

Ahora, muestre el mensaje al usuario si se ha terminado el trabajo de preparación. Para ello, agregue el código siguiente después de la línea que lee, TODO: Add the prep work display.

{/* TODO: Add the prep work display */}
{ prepared ? <h2>Prep work done!</h2> : <h2>Just keep chopping.</h2>}

Miramos el objeto prepared. Si es true, se muestra Trabajo de preparación terminado. En caso contrario, se muestra Siga picando.

Prueba de la página

  1. Guarde todos los archivos.
  2. Vuelva al explorador y actualice la página.
  3. Seleccione los ingredientes para marcarlos como todos preparados. (Deben estar todos tachados de la lista). El texto se actualiza en la parte inferior de la página.