Håndtering af Tilstand med useState

useState-hooket er et grundlæggende React-hook, der gør det muligt for funktionelle komponenter at have en tilstand. Det giver en metode til at deklarere og opdatere tilstandsvariabler inden for en komponent.

Syntaks:

For at anvende useState-hooket kaldes det med den oprindelige tilstand (initialState) som argument. Det returnerer et array med to elementer: den aktuelle tilstandsværdi (state) og en funktion (setState) til at opdatere tilstanden.

const [state, setState] = useState(initialState);

• Det er muligt at vælge et vilkårligt navn til en state-variabel. Det anbefales at bruge et variabelnavn, der præcist beskriver, hvilken tilstand der gemmes eller opdateres, såsom inputValue, page, number, name osv.

• Tilsvarende har man fleksibilitet i navngivningen af setState-funktionen. Dog er det standard at følge et bestemt mønster: navnet på setState-funktionen bør starte med "set" efterfulgt af navnet på den tilhørende tilstandsvariabel. For eksempel, hvis state-variablen hedder mail, vil den tilsvarende setState-funktion typisk hedde setMail.

Eksempel 1:

Vi bygger Counter-komponenten, som vedligeholder sin egen tilstand. Når knappen Increment klikkes, opdateres tilstanden og komponenten re-renderes.

import React, { useState } from "react";

const Counter = () => {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

I dette eksempel anvendes useState-hooket til at erklære en tilstandsvariabel count med startværdien 0. Funktionen setCount bruges til at opdatere variablen count, hver gang knappen klikkes.

Linje-for-linje forklaring:

• Linje 1: Import af useState-hooket fra React-biblioteket for at anvende dets funktionalitet;
• Linje 3: Definition af Counter-komponenten med den konventionelle funktionssyntaks;
• Linje 4: Initialisering af tilstand ved brug af useState-hooket;

1. count repræsenterer tællerens værdi. Startværdien er 0, angivet i parentesen ved useState(0);
2. setCount er funktionen, der opdaterer tilstanden efter behov.

• Linje 6-8: Denne JavaScript arrow-funktion håndterer logikken for opdatering af tilstanden. Den udføres, når "increment"-knappen klikkes. Inden i funktionen bruges setCount til at opdatere tilstanden;
• Linje 10-15: Renderer komponentens markup. På linje 12 vises den aktuelle tilstandsværdi (count). Knappen på linje 13 anvender attributten onClick til at definere den funktion, der skal udføres ved klik. I dette tilfælde gives funktionen increment videre.

Fuld app-kode:

Eksempel 2:

Vi konstruerer Form-komponenten med sin egen uafhængige tilstand. Brugeren bliver bedt om at indtaste deres navn i inputfeltet, og afhængigt af deres input vil vi ændre det viste indhold.

import React, { useState } from "react";

const Form = () => {
  const [userName, setUserName] = useState("");

  const handleChange = (event) => {
    const inputValue = event.target.value;
    setUserName(inputValue);
  };

  return (
    <div>
      <input
        type="text"
        value={userName}
        onChange={handleChange}
        placeholder="Your name"
      />
      <p>Hello, {userName}!</p>
    </div>
  );
};

I dette eksempel bruges useState-hooken til at erklære en tilstandsvariabel userName med en initial værdi som en tom streng. Funktionen setUserName opdaterer variablen userName, når det er nødvendigt.

Linje for linje forklaring:

• Linje 1: useState-hooken importeres fra React-biblioteket for at benytte dens funktionalitet;
• Linje 3: Form-komponenten defineres ved brug af standard funktionssyntaks;
• Linje 4: Den indledende tilstand sættes ved hjælp af useState-hooken;

1. userName repræsenterer værdien af inputfeltet, som initialt er sat til en tom streng (""), angivet i parentesen til useState("");
2. setUserName er funktionen, der gør det muligt at opdatere tilstanden efter behov.

• Linje 6-9: Denne JavaScript arrow-funktion håndterer logikken for opdatering af tilstanden. Den udløses, når brugeren indtaster noget i feltet. Inputværdien hentes i funktionen via event.target.value. Derefter bruges setUserName-funktionen til at opdatere tilstanden med værdien fra inputfeltet;
• Linje 11-21: Komponentens markup renderes.
  1. På linje 15 tildeles userName som den indledende værdi for input via value-attributten;
  2. På linje 16 bruges onChange-attributten til at angive den funktion, der skal kaldes, når der sker en ændring i input.

Fuld app-kode: