Håndtering af tilstand med useState

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

Syntaks:

For at bruge hooken useState kaldes den med den oprindelige tilstand (initialState) som argument. Den 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 hvilket som helst 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.

• På samme måde har man fleksibilitet i navngivningen af setState-funktionen. Det er dog 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 vil vedligeholde sin egen tilstand. Når knappen Increment klikkes, opdaterer vi tilstanden og udløser en gen-rendering af komponenten.

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-hooken 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: Vi importerer useState-hooken fra React-biblioteket for at benytte dens funktionalitet;
• Linje 3: Vi definerer Counter-komponenten ved hjælp af den konventionelle funktionssyntaks;
• Linje 4: Vi initialiserer tilstanden ved hjælp af useState-hooken;

1. count repræsenterer værdien af tælleren. Startværdien er 0, angivet i parentesen i useState(0);
2. setCount er funktionen, der opdaterer tilstanden, når det er nødvendigt.

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

Eksempel 2:

Vi konstruerer Form-komponenten med sin egen uafhængige tilstand. Brugeren bliver bedt om at indtaste sit navn i inputfeltet, og afhængigt af input ændres 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 startværdien en tom streng. Funktionen setUserName opdaterer variablen userName, når det er nødvendigt.

Linje for linje forklaring:

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

1. userName repræsenterer værdien af inputfeltet, som i starten er sat til en tom streng (""), angivet i parentesen i 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 en bruger indtaster noget i feltet. Vi henter inputværdien i funktionen ved hjælp af event.target.value. Derefter bruger vi setUserName-funktionen til at opdatere tilstanden med værdien fra inputfeltet;
• Linje 11-21: Komponentens markup bliver gengivet.

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