Dodawanie punktów zaczepienia

2 min

Możesz użyć elementu Effect Hook, aby śledzić stan aplikacji i uruchamiać kod w odpowiedzi na aktualizacje. Rejestrujemy funkcję, którą chcemy uruchomić w odpowiedzi na zmiany przy użyciu polecenia useEffect.

Scenariusz

Nasza aplikacja umożliwia użytkownikowi naciśnięcie poszczególnych elementów, aby oznaczyć je jako przygotowane. Jeśli niektóre elementy nie są jeszcze przygotowane, chcemy wyświetlić komunikat Po prostu posiekać. Po zakończeniu wszystkich elementów chcemy wyświetlić wykonaną pracę przygotowania.

Skonfigurujemy to zachowanie, dodając nowy obiekt stanu. Zaktualizujemy obiekt z naszego elementu Effect Hook.

Ważne

W naszym przykładzie modyfikujemy stan wewnątrz useEffectelementu . Domyślnie jest uruchamiany za każdym razem, useEffect gdy dowolny obiekt stanowy jest modyfikowany. To zachowanie może utworzyć nieskończoną pętlę. W tej pętli zmodyfikujemy stan , a element Hook jest uruchamiany, co modyfikuje stan, który uruchamia element Hook itd.

Aby uniknąć nieskończonej pętli, możemy użyć parametru zależności , useEffect aby przyjrzeć się tylko jednemu obiektowi. Zrobimy to podczas tworzenia kodu.

Dodawanie nowej właściwości stanu

Otwórz plik App.jsx.
Aby dodać nową właściwość stanu, wstaw następujący kod poniżej wiersza, który odczytuje polecenie TODO: Add new state property.
```
// TODO: Add new state property
const [ prepared, setPrepared ] = useState(false);
```

Dodawanie odbiornika efektu haka

Aby dodać odbiornik Effect Hook, wstaw następujący kod poniżej wiersza, który odczytuje: TODO: Add the effect hook.

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

Kod używa setPrepared metody do aktualizacji prepared. Używa ona każdej metody, która zwraca wartość logiczną na podstawie każdego elementu spełniającego określone kryteria. W naszym przypadku sprawdzamy, czy każdy element jest przygotowany. Jeśli nie, metoda zwraca wartość false.

Drugi parametr w parametrze useEffect jest ustawiony na [recipe]wartość . To ustawienie zapewnia zależność, aby upewnić się, że nasz kod jest uruchamiany tylko wtedy, gdy recipe obiekt ulegnie zmianie.

Dodawanie ekranu

Teraz wyświetl komunikat użytkownikowi, jeśli wykonano pracę przygotowania. Aby to zrobić, dodaj następujący kod poniżej wiersza, który odczytuje: TODO: Add the prep work display.

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

Przyjrzymy się obiektowi prepared . Jeśli to prawda, zostanie wyświetlona praca przygotowania zakończona! W przeciwnym razie wyświetlamy po prostu posiekanie.

Testowanie strony

Zapisz wszystkie pliki.
Wróć do przeglądarki i odśwież stronę.
Wybierz składniki, aby oznaczyć je wszystkie przygotowane. (Wszystkie powinny zostać skrzyżowane poza listą). Tekst jest aktualizowany w dolnej części strony.

Kontynuuj