Lägg till krokar

  • 2 minuter

Du kan använda Effect Hook för att hålla ett öga på programmets tillstånd och köra kod som svar på uppdateringar. Vi registrerar den funktion som vi vill köra som svar på ändringar med hjälp useEffectav .

Scenario

Med vårt program kan användaren trycka på enskilda objekt för att markera dem som förberedda. Om vissa objekt inte är förberedda än vill vi visa meddelandet Fortsätt att hacka. När alla objekt är klara vill vi visa förberedelsearbetet klart!

Vi konfigurerar det här beteendet genom att lägga till ett nytt tillståndsobjekt. Vi uppdaterar objektet från vår Effektkrok.

Viktigt!

I vårt exempel ändrar vi tillståndet i useEffect. Körs som standard useEffect när alla tillståndskänsliga objekt ändras. Det här beteendet kan skapa en oändlig loop. I den här loopen ändrar vi tillstånd och Hook körs, vilket ändrar tillstånd, som kör Hook och så vidare.

För att undvika den oändliga loopen kan vi använda beroendeparametern på för att bara titta på useEffect ett objekt. Vi gör detta när vi skapar vår kod.

Lägg till den nya tillståndsegenskapen

  1. Öppna filen App.jsx.

  2. Om du vill lägga till den nya tillståndsegenskapen infogar du följande kod under raden som läser, TODO: Add new state property.

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

Lägg till Effect Hook-lyssnaren

Om du vill lägga till Effect Hook-lyssnaren infogar du följande kod under raden som läser, TODO: Add the effect hook.

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

Koden använder setPrepared för att uppdatera prepared. Den använder varje metod, som returnerar ett booleskt värde baserat på varje objekt som matchar de villkor som vi anger. I vårt fall kontrollerar vi om varje objekt är förberett. Annars returnerar metoden false.

Den andra parametern på är inställd [recipe]på useEffect . Den här inställningen tillhandahåller beroendet för att se till att vår kod endast körs när objektet recipe ändras.

Lägg till visningen

Visa nu meddelandet för användaren om förberedelsearbetet är klart. Om du vill göra det lägger du till följande kod under raden som läser, TODO: Add the prep work display.

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

Vi tittar på objektet prepared . Om det är sant visar vi förberedelsearbete gjort! Annars visar vi Bara hålla hugga.

Testa sidan

  1. Spara alla filer.
  2. Gå tillbaka till webbläsaren och uppdatera sidan.
  3. Välj ingredienserna för att markera alla förberedda. (Alla bör strykas från listan.) Texten uppdateras längst ned på sidan.