CONTATTACI

Guide per aspiranti programmatori

Programmatore che esamina react al microscopio
Lezione 21 / 41

Array e oggetti negli stati in React

Sappiamo che gli stati in React sono immutabili, cioè non possono essere modificati direttamente, ma dobbiamo chiamare la funzione setter per impostare il prossimo valore dello stato.  L’impossibilità di modificare direttamente gli stati potrebbe, però, mettere in difficoltà chi è abituato a utilizzare linguaggi di programmazione che supportano lo stile imperativo (primo tra tutti, il linguaggio JavaScript stesso). Prendiamo ad esempio un’operazione del genere:

 

const onDescriptionChange = (description) => {
  setTodoItem((todoItem) => {
    // Non funziona!
    todoItem.description = description;
    return todoItem;
  });
};

per quanto perfettamente lecita in JavaScript, non funzionerà! L’interfaccia non si aggiornerà e non raggiungeremo il risultato che vogliamo ottenere. Invece, per aggiornare lo stato, dobbiamo prima clonarlo e poi impostare le nuove informazioni:

 

const onDescriptionChange = (description) => {
  setTodoItem((todoItem) => {
    return {
      ...todoItem,
      description,
    };
  });
};

La forma { …todoItem } crea un nuovo oggetto e copia le proprietà dell’oggetto originale (todoItem) all’interno di esso, senza modificare l’oggetto originale (todoItem). Una volta creato il nuovo oggetto, associamo il valore del nostro argomento description alla proprietà “description” del nuovo oggetto. Potremmo scrivere la stessa senza usare lo spread operator (…) né la sintassi ridotta:

 

const onDescriptionChange = (description) => {
  setTodoItem((todoItem) => {
    return {
      isDone: todoItem.isDone,
      description: description,
    };
  });
};

Immaginiamo un caso come:

 

return {
  firstName: user.firstName,
  lastName: user.lastName,
  fiscalCode: user.fiscalCode,
  email: user.email,
  addressCountry: user.addressCountry,
  addressProvince: user.addressProvince,
  addressCity: user.addressCity,
  addressStreet: user.addressStreet,
  addressStreetNumber: user.addressStreetNumber,
};

Se dovessimo scrivere tutto questo per ogni event listener, diventeremmo pazzi! E se in futuro aggiungessimo nuove proprietà all’oggetto user, dovremmo andare a ritoccare ogni event listener per aggiungere la nuova proprietà. Usiamo lo spread operator (…) perché, indipendentemente dal numero di proprietà che il nostro oggetto contiene, basta una riga di codice per crearne una copia.

 

Fun fact: lo spread operator (…) è stato introdotto per gli array con il rilascio di ES6 (EcmaScript 6, standard rilasciato nel 2015). Solo successivamente è stato possibile applicarlo anche agli oggetti, proprio grazie a React, che introdusse questa possibilità molto prima che diventasse lo standard.

 

Anche quando si tratta di array, c’è una serie di cose che non possono essere fatte nel contesto delle funzioni setter degli stati di React, in quanto modificherebbero l’array originale. E siamo pronti a scommettere che queste cose includono tutti i metodi che la maggior parte degli sviluppatori junior usano normalmente: push, pull, shift, unshift e splice.

Per ogni caso d’uso, c’è una soluzione che rispetta la regola dell’immutabilità. Vediamole tutte.

 

Aggiungere proprietà a un oggetto in React

// Versione con mutabilità
myObject.newKey = newValue;

// Versione senza mutabilità
const myNewObject = {
  ...myObject,
  newKey: newValue,
};

Modificare proprietà di un oggetto in React

// Versione con mutabilità
myObject.oldKey = newValue;

// Versione senza mutabilità
const myNewObject = {
  ...myObject,
  oldKey: newValue,
};

Rimuovere proprietà da un oggetto in React

// Versione con mutabilità
delete myObject.oldKey;

// Versione senza mutabilità
const { oldKey, ...myNewObject } = myObject;

Utilizziamo la destrutturazione per estrarre la proprietà che non ci serve più. Tutto ciò che rimane (myNewObject) è ciò che ci serve.

 

Aggiungere elementi a un array in React

// Versione con mutabilità
myArray.push(newFirstElement);
myArray.unshift(newLastElement);

// Versione senza mutabilità
const myNewArray = [firstNewElement, ...myArray, lastNewElement];

push e unshift possono essere effettuate da sole o in contemporanea nella versione immutabile.

 

Modificare elementi di un array per indice in React

// Versione con mutabilità
myArray[targetIndex] = newValue;

// Versione senza mutabilità
const newArray = myArray.map((oldValue, index) => {
  if (index === targetIndex) {
    return newValue;
  } else {
    return oldValue;
  }
});

In questo caso, la versione immutabile è un po’ più complessa: dobbiamo scorrere l’intero array (map crea internamente una copia dell’array), riutilizzando tutti gli elementi dell’array precedente tranne quello che ci serve, che individuiamo per indice.

 

Modificare elementi di un array per valore in React

// Versione con mutabilità
const targetIndex = myArray.indexOf(oldValue);

if (targetIndex !== -1) {
  myArray[targetIndex] = newValue;
}

// Versione senza mutabilità
const newArray = myArray.map((value) => {
  if (value === oldValue) {
    return newValue;
  } else {
    return value;
  }
});

Anche in questo caso, dobbiamo scorrere l’intero array (map crea internamente una copia dell’array), riutilizzando tutti gli elementi dell’array precedente tranne quello che ci serve, che individuiamo per valore.

 

Rimuovere elementi da un array

// Versione con mutabilità
myArray.pop();
myArray.shift();

// Versione senza mutabilità
const [firstOldElement, ...myNewArray, lastOldElement] = myArray;

Come nel caso della rimozione di proprietà da oggetti, sfruttiamo la destrutturazione per ottenere tutto ciò che non è quello che non ci serve, cioè quello che ci serve (i maestri di algebra booleana direbbero che stiamo usando una tautologia: !!useful === useful).

Contattaci senza impegno per informazioni sul corso

Pagamento rateale

Valore della rata: A PARTIRE DA 115 €/mese.

Esempio di finanziamento 

Importo finanziato: € 2440 in 24 rate da € 115 – TAN fisso 9,55% TAEG 12,57% – importo totale del credito € 2841.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

*In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Pagamento rateale

Valore della rata: A PARTIRE DA 210 €/mese.

Esempio di finanziamento  

Importo finanziato: € 4500 in 24 rate da € 210,03 – TAN fisso 9,68% TAEG 11,97% – importo totale del credito € 5146,55.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Contattaci senza impegno per informazioni sul corso

Scopriamo insieme se i nostri corsi fanno per te. Compila il form e aspetta la chiamata di uno dei nostri consulenti.