Mettre à jour l’état

• 4 minutes

Étant donné que l’état dans React est immuable, pour modifier la valeur d’un objet avec état, nous le remplaçons par un nouvel objet. Ainsi, nous évitons toute une classe de bogues où un objet pourrait être dans un état non valide parce qu’il est modifié.

Copier des objets

Les types primitifs, tels que les valeurs booléennes ou les nombres, sont des objets basés sur des valeurs, par opposition aux objets de référence. Par conséquent, tout changement remplace automatiquement l’objet entier.

Les chaînes se comportent de la même façon parce qu’elles sont immuables. Nous modifions une chaîne en la remplaçant par une nouvelle valeur.

let message = 'Hello, ';
message = message + 'world!';

Lorsque nous utilisons un objet, nous devons en créer une nouvelle instance pour garantir l’immuabilité. La syntaxe la plus courante pour créer une copie d’un objet est la syntaxe spread, également appelée opérateur spread.

let message = {
    text: 'Hello, world',
    color: 'red'
}

let messageCopy = { ...message };

Modifier des propriétés individuelles

En règle générale, nous devons mettre à jour uniquement une partie des propriétés d’un objet. La création d’une copie et la modification de chaque propriété deviendraient fastidieuses.

Dans la syntaxe précédente, vous remarquerez que nous créons un nouvel objet JSON en utilisant des accolades ({ }). L’opérateur spread peut être utilisé pour créer une version initiale du nouvel objet. Il nous permet de spécifier des valeurs mises à jour pour certaines propriétés. Par exemple, si nous avons une nouvelle valeur pour color mais que nous voulons garder le texte, nous pouvons utiliser le code suivant.

let message = {
    text: 'Hello, world',
    color: 'red'
}

let messageCopy = {
    ...message,
    color: 'green'
};

Ici, text conserve la valeur d’origine. La valeur color est mise à jour avec la couleur verte.

// new object
{
    text: 'Hello, world',
    color: 'green'
}