React.js - Qual è il modo migliore per aggiungere un valore a un array nello stato

Question

Ho un array in stato, diciamo this.state.arr. Desidero aggiungere qualcosa a questa proprietà di stato e quindi modificare alcune altre proprietà.

Opzione 1

onChange(event){ 
    this.state.arr.push('newvalue'); 
    ... 
    this.setState({some:'val',arr:this.state.arr}) 
} 

Opzione 2

onChange(event){ 
    var newArr = this.state.arr; 
    ... 
    newArr.push('newvalue'); 
    ... 
    this.setState({some:'val',arr:newArr}) 
} 

Quindi .. So this.state si suppone di essere trattati immutabile. Ma va bene usarlo come nell'opzione 1, dove ancora lo stato, oppure devo andare con qualcosa come l'opzione 2, e quindi sempre prima di fare una copia in memoria

Answer 1

Entrambe le opzioni fornito sono gli stessi. Entrambi continueranno a puntare allo stesso oggetto in memoria e avranno gli stessi valori di array. È necessario considerare l'oggetto stato come immutabile come hai detto, tuttavia è necessario ricreare l'array in modo che punti ad un nuovo oggetto, impostare il nuovo oggetto, quindi ripristinare lo stato. Esempio:

onChange(event){ 
    var newArray = this.state.arr.slice();  
    newArray.push("new value"); 
    this.setState({arr:newArray}) 
} 

Answer 2

Per ora, questo è il modo migliore.

this.setState(previousState => ({ 
    myArray: [...previousState.myArray, 'new value'] 
})); 

Answer 3

Un altro modo semplice utilizzando concat:

this.setState({ 
    arr: this.state.arr.concat('new value') 
}) 

Answer 4

Se si sta utilizzando la sintassi ES6 è possibile utilizzare la spread operator per aggiungere nuovi elementi ad un array esistente come uno di linea.

// Append an array 
const newArr = [1,2,3,4] 
this.setState({ arr: [...this.state.arr, ...newArr] }); 

// Append a single item 
this.setState({ arr: [...this.state.arr, 'new item'] });