Modo corretto per inserire l'array di stato

Question

Sembra che si stiano riscontrando problemi nel trasferire dati in un array di stati. Sto cercando di ottenere in questo modo:

this.setState({ myArray: this.state.myArray.push('new value') }) 

Ma io credo che questo è il modo errato e causa problemi con mutevolezza?

Answer 1

Array spinta restituisce lunghezza

this.state.myArray.push('new value') restituisce la lunghezza della matrice estesa, invece della matrice stessa.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push

immagino che ci si aspetta il valore restituito sia la matrice.

Immutabilità

Sembra che sia piuttosto il comportamento di React:

MAI mutano this.state direttamente, come chiamare setState() in seguito possono sostituire la mutazione che hai fatto. Tratta questo stato come se fosse immutabile .

https://facebook.github.io/react/docs/component-api.html

immagino, si dovrebbe fare in questo modo (non hanno familiarità con Reagire):

var joined = this.state.myArray.concat('new value'); 
this.setState({ myArray: joined }) 

Answer 2

È possibile utilizzare .concat metodo per creare copia del vostro array con nuovi dati:

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

Ma attenzione al comportamento speciale del metodo .concat quando si passano gli array - [1, 2].concat(['foo', 3], 'bar') corrisponderà a [1, 2, 'foo', 3, 'bar'].

Answer 3

Non si dovrebbe mai utilizzare lo stato. Almeno, non direttamente. Se vuoi aggiornare la tua matrice, ti consigliamo di fare qualcosa di simile.

var newStateArray = this.state.myArray.slice(); 
newStateArray.push('new value'); 
this.setState(myArray: newStateArray); 

Lavorare direttamente sull'oggetto di stato non è consigliabile. Puoi anche dare un'occhiata agli aiutanti di immutabilità di React.

https://facebook.github.io/react/docs/update.html

Answer 4

Usando ES6 si può fare in questo modo:

this.setState({ myArray: [...this.state.myArray, 'new value'] }) //simple value 
this.setState({ myArray: [...this.state.myArray, ...[1,2,3] ] }) //another array 

Spread syntax