Crochet de useStateréaction

Le React useStateHook nous permet de suivre l'état d'un composant de fonction.

L'état fait généralement référence aux données ou aux propriétés qui doivent être suivies dans une application.

ImporteruseState

Pour utiliser le useStatecrochet, nous devons d'abord l'insérer importdans notre composant.

import { useState } from "react";

Notez que nous détruisons useStatecar reactil s'agit d'une exportation nommée.

InitialiseruseState

Nous initialisons notre état en appelant useStatenotre composant de fonction.

useStateaccepte un état initial et renvoie deux valeurs :

• L'état actuel.
• Une fonction qui met à jour l'état.

import { useState } from "react";

function FavoriteColor() {
  const [color, setColor] = useState("");
}

Notez qu'encore une fois, nous détruisons les valeurs renvoyées par useState.

La première valeur, color, est notre état actuel.

La deuxième valeur, setColor, est la fonction utilisée pour mettre à jour notre état.

Enfin, nous définissons l'état initial sur une chaîne vide :useState("")

Lire l'état

Nous pouvons maintenant inclure notre état n'importe où dans notre composant.

import { useState } from "react";
import ReactDOM from "react-dom";

function FavoriteColor() {
  const [color, setColor] = useState("red");

  return <h1>My favorite color is {color}!</h1>
}

ReactDOM.render(<FavoriteColor />, document.getElementById('root'));

Mettre à jour l'état

Pour mettre à jour notre état, nous utilisons notre fonction de mise à jour d'état.

import { useState } from "react";
import ReactDOM from "react-dom";

function FavoriteColor() {
  const [color, setColor] = useState("red");

  return (
    <>
      <h1>My favorite color is {color}!</h1>
      <button
        type="button"
        onClick={() => setColor("blue")}
      >Blue</button>
    </>
  )
}

ReactDOM.render(<FavoriteColor />, document.getElementById('root'));

Que peut contenir l'État

Le useStatecrochet peut être utilisé pour garder une trace des chaînes, des nombres, des booléens, des tableaux, des objets et de toute combinaison de ceux-ci !

Nous pourrions créer plusieurs crochets d'état pour suivre les valeurs individuelles.

import { useState } from "react";
import ReactDOM from "react-dom";

function Car() {
  const [brand, setBrand] = useState("Ford");
  const [model, setModel] = useState("Mustang");
  const [year, setYear] = useState("1964");
  const [color, setColor] = useState("red");

  return (
    <>
      <h1>My {brand}</h1>
      <p>
        It is a {color} {model} from {year}.
      </p>
    </>
  )
}

ReactDOM.render(<Car />, document.getElementById('root'));

Ou, nous pouvons simplement utiliser un état et inclure un objet à la place !

import { useState } from "react";
import ReactDOM from "react-dom";

function Car() {
  const [car, setCar] = useState({
    brand: "Ford",
    model: "Mustang",
    year: "1964",
    color: "red"
  });

  return (
    <>
      <h1>My {car.brand}</h1>
      <p>
        It is a {car.color} {car.model} from {car.year}.
      </p>
    </>
  )
}

ReactDOM.render(<Car />, document.getElementById('root'));

Mise à jour des objets et des tableaux dans l'état

Lorsque l'état est mis à jour, l'état entier est écrasé.

Et si nous voulions seulement mettre à jour la couleur de notre voiture ?

Si nous n'appelions que setCar({color: "blue"}), cela supprimerait la marque, le modèle et l'année de notre état.

Nous pouvons utiliser l'opérateur de propagation JavaScript pour nous aider.

import { useState } from "react";
import ReactDOM from "react-dom";

function Car() {
  const [car, setCar] = useState({
    brand: "Ford",
    model: "Mustang",
    year: "1964",
    color: "red"
  });

  const updateColor = () => {
    setCar(previousState => {
      return { ...previousState, color: "blue" }
    });
  }

  return (
    <>
      <h1>My {car.brand}</h1>
      <p>
        It is a {car.color} {car.model} from {car.year}.
      </p>
      <button
        type="button"
        onClick={updateColor}
      >Blue</button>
    </>
  )
}

ReactDOM.render(<Car />, document.getElementById('root'));

Parce que nous avons besoin de la valeur actuelle de l'état, nous passons une fonction dans notre setCarfonction. Cette fonction reçoit la valeur précédente.

Nous renvoyons ensuite un objet, en étalant le previousStateet en écrasant uniquement la couleur.

import { useState } from "react";

function KeepCount() {
  const [, ] = useState(0);
}