Korrekter Weg, um in den Status-Array zu gelangen

Question

Ich habe Probleme, Daten in ein Status-Array zu schieben. Ich versuche, es auf diese Weise zu erreichen:

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

Aber ich glaube, dass dies eine falsche Art und Weise und verursacht Probleme mit Veränderlichkeit?

Answer 1

Array Push kehrt Länge

this.state.myArray.push('new value') gibt die Länge des erweiterten Array anstelle des Array selbst.

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

Ich denke, man der zurückgegebene Wert erwartet, dass das Array sein.

Unveränderlichkeit

Es scheint, es ist vielmehr das Verhalten der Reaktion:

this.state nie direkt mutieren, wie setState() aufrufen kann danach die Mutation ersetzen Sie gemacht. Behandle diesen Zustand so, als wäre er unveränderlich.

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

Ich denke, würden Sie es tun, wie folgt (nicht vertraut mit React):

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

Answer 2

Sie .concat Methode Kopie Ihres Arrays verwenden können mit neuen Daten zu erstellen:

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

Aber Vorsicht vor speziellen Verhalten der .concat Methode beim Übergeben von Arrays - [1, 2].concat(['foo', 3], 'bar') wird [1, 2, 'foo', 3, 'bar'] ergeben.

Answer 3

Sie sollten den Zustand überhaupt nicht betreiben. Zumindest nicht direkt. Wenn Sie Ihr Array aktualisieren möchten, sollten Sie etwas ähnliches tun.

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

Das direkte Bearbeiten des Statusobjekts ist nicht wünschenswert. Sie können auch React's Immutability Helpers anschauen.

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

Answer 4

Mit es6 kann es wie folgt geschehen:

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

Spread syntax