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 er der fleksibilitet i valg af funktionsnavn ved brug af setState-funktionen. Det er dog standardkonvention 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 er 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 genrenderes.

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 bruges 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 benytte dets funktionalitet;
• Linje 3: Definition af Counter-komponenten med den konventionelle funktionssyntaks;
• Linje 4: Initialisering af tilstand med useState-hooket;

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

• Linje 6-8: Denne JavaScript arrow-funktion håndterer logikken for opdatering af tilstand. 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.

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-hooket til at erklære en tilstandsvariabel userName med en initialværdi som en tom streng. Funktionen setUserName opdaterer variablen userName, når det er nødvendigt.

Forklaring linje for linje:

• Linje 1: Vi importerer useState-hooket fra React-biblioteket for at anvende dets funktionalitet;
• Linje 3: Vi definerer Form-komponenten ved brug af standard funktionssyntaks;
• Linje 4: Vi sætter den indledende tilstand ved hjælp af useState-hooket;

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. Vi henter inputværdien i funktionen ved hjælp af event.target.value. Derefter anvender vi funktionen setUserName til at opdatere tilstanden med værdien fra inputfeltet;
• Linje 11-21: Markup for komponenten bliver gengivet.

1. På linje 15 tildeler vi userName som den indledende værdi for input ved brug af attributten value;
2. På linje 16 anvender vi attributten onChange til at angive den funktion, der skal kaldes, når der sker en ændring i input.

Fuld app-kode: