Aggiungere hook

2 minuti

È possibile usare l'hook Effect per tenere sotto controllo lo stato dell'applicazione ed eseguire codice in risposta agli aggiornamenti. Occorre registrare la funzione che si vuole eseguire in risposta alle modifiche tramite useEffect.

Scenario

L'applicazione permette all'utente di toccare singoli elementi per contrassegnarli come preparati. Se alcuni elementi non sono ancora stati preparati, si vuole venga visualizzato il messaggio Just keep chopping. Quando tutti gli elementi sono terminati, si vuole che venga visualizzato Prep work done!

Per configurare questo comportamento si aggiungerà un nuovo oggetto stato. L'oggetto verrà aggiornato dall'hook Effect.

Importante

In questo esempio viene modificato lo stato all'interno di useEffect. Per impostazione predefinita, useEffect viene eseguito ogni volta che viene modificato qualsiasi oggetto con stato. Questo comportamento può creare un ciclo infinito, in cui viene modificato lo stato e viene eseguito l'hook, che a sua volta modifica lo stato, che esegue a sua volta l'hook e così via.

Per evitare questo ciclo infinito, è possibile usare il parametro di dipendenza su useEffect per esaminare un solo oggetto. Questa operazione verrà eseguita durante la creazione del codice.

Aggiungere la nuova proprietà di stato

Aprire il file App.jsx.
Per aggiungere la nuova proprietà di stato, inserire il codice seguente sotto la riga TODO: Add new state property.
```
// TODO: Add new state property
const [ prepared, setPrepared ] = useState(false);
```

Aggiungere il listener dell'hook Effect

Per aggiungere il listener dell'hook Effect, inserire il codice seguente sotto la riga TODO: Add the effect hook.

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

Il codice usa setPrepared per aggiornare prepared. Usa il metodo every, che restituisce un valore booleano basato su ogni elemento corrispondente ai criteri specificati. In questo caso, si verifica se ogni elemento è stato preparato. In caso contrario, il metodo restituisce false.

Il secondo parametro in useEffect è impostato su [recipe]. Questa impostazione fornisce la dipendenza per garantire che il codice venga eseguito solo quando l'oggetto recipe cambia.

Aggiungere la visualizzazione

A questo punto occorre visualizzare il messaggio all'utente se il lavoro di preparazione è terminato. A tale scopo, aggiungere il codice seguente sotto la riga TODO: Add the prep work display.

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

Osservare l'oggetto prepared. Se è true, viene visualizzato il messaggio Prep work done! In caso contrario, viene visualizzato Just keep chopping.

Testare la pagina