Dodawanie stanu do aplikacji

  • 2 min

Platforma React zarządza stanem na kilka sposobów. Skupimy się na jednym z głównych sposobów, React Hooks.

Hak to mechanizm, który umożliwia dostęp do wewnętrznych funkcji react. Możesz użyć punktów zaczepienia, aby uruchomić kod, gdy coś się zmieni w rozwiązaniu React. Możesz też użyć ich do zarejestrowania czegoś w usłudze React, takiego jak stan. Podczas tworzenia stanu przy użyciu useState elementu Hook, na przykład uzyskujemy obiekt stanu i funkcję aktualizatora w celu zaktualizowania wartości Hook.

Scenariusz

Jedną z typowych technik, z których korzysta wiele kucharzy, jest mise en place, czyli z francuskiego "wprowadzenie na miejsce". Kucharze zapewniają, że wszystkie przedmioty są przygotowane przed rozpoczęciem gotowania.

W naszej aplikacji przepisowej chcemy umożliwić użytkownikom naciśnięcie składników, aby oznaczyć je jako przygotowane. Zaczniemy od utworzenia stanu i przekazania informacji wyświetlanych do składnika. W następnej lekcji dowiemy się, jak obsługiwać zdarzenia.

Dodaj stan

Dowolny obiekt lub typ danych Języka JavaScript można zarejestrować jako stanowy w rozwiązaniu React. Funkcja używana do rejestrowania obiektu to useState. Funkcja useState określa wartość początkową. Zwraca nowo utworzony obiekt stanowy i inną funkcję, której można użyć do zaktualizowania wartości.

Uwaga

W rozwiązaniu React stan jest niezmienny, co oznacza, że nie można go zmienić. Aby zmodyfikować wartość obiektu stanowego, zastąp go nowym wystąpieniem zawierającym odpowiednie wartości. Funkcja zwrócona przez useState program zarządza tym procesem.

  1. W Eksploratorze programu VS Code rozwiń folder src, a następnie otwórz plik App.jsx . Zwróć uwagę na istniejący initialRecipe obiekt. Użyjemy tego obiektu jako wartości domyślnej dla naszego stanowego recipeobiektu .

  2. recipe Utwórz obiekt stanu i setRecipe funkcję na podstawie useStateelementu . Aby to zrobić, dodaj następujący kod po wierszu, który odczytuje, TODO: Create recipe state.

    const [ recipe, setRecipe ] = useState(initialRecipe);

    W tym kodzie recipe jest obiektem stanowym. Funkcja zostanie użyta setRecipe do zastąpienia recipe wszystkimi nowymi wersjami.

  3. Możemy użyć recipe polecenia , aby przekazać rekwizyty do składników. W poniższym kodzie RecipeTitle składnik będzie używany do wyświetlania tytułu i opinii. title Przekaż wartości ifeedback, RecipeTitle dodając następujący kod po komentarzu, który odczytuje wartość TODO: Pass recipe metadata to RecipeTitle.

    <RecipeTitle title={recipe.title} feedback={recipe.feedback} />

  4. Otwórz plik RecipeTitle.jsx. Zwróć uwagę na istniejący składnik, który wyświetla title i feedback props.

Testowanie strony

  1. Zapisz wszystkie pliki.

  2. Wróć do przeglądarki i odśwież go. Na stronie powinny zostać wyświetlone metadane przepisu.

    Screenshot of the recipe metadata in the browser window.