Aggiornare lo stato

• 4 minuti

Poiché lo stato in React non è modificabile, per modificare il valore di un oggetto con stato occorre sostituirlo con un nuovo oggetto. In questo modo si evita di generare un'intera classe di bug in cui un oggetto potrebbe avere uno stato non valido perché è stato modificato.

Copiare oggetti

I tipi primitivi, ad esempio valori booleani o numeri, sono oggetti basati su valori, al contrario degli oggetti di riferimento. Qualsiasi modifica sostituisce quindi automaticamente l'intero oggetto.

Le stringhe si comportano in modo analogo in quanto non sono modificabili. Per modificare una stringa occorre sostituirla con un nuovo valore.

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

Quando si usa un oggetto, è necessario creare una nuova istanza dell'oggetto per garantirne l'immutabilità. La sintassi più comune per la creazione di una copia di un oggetto è la spread syntax, detta anche operatore spread.

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

let messageCopy = { ...message };

Modificare singole proprietà

In genere è necessario aggiornare solo un subset di proprietà per un oggetto. La creazione di una copia e la modifica di ogni proprietà diventerebbe quindi un'operazione noiosa.

Nella sintassi precedente si può notare che è stato creato un nuovo oggetto JSON usando le parentesi graffe ({ }). L'operatore spread può essere usato per creare una versione iniziale del nuovo oggetto. Consente di specificare valori aggiornati per determinate proprietà. Se ad esempio esiste un nuovo valore per color ma si vuole mantenere il testo, è possibile usare il codice seguente.

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

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

Qui, text mantiene il valore originale. Il valore di color è stato aggiornato in green.

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