webentwicklung-frage-antwort-db.com.de

Richtiger Weg zum Push in State Array

Ich scheine Probleme zu haben, Daten in ein Zustandsarray zu schieben ... Ich versuche es auf diese Weise zu erreichen:

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

Aber ich glaube, das ist ein falscher Weg und verursacht Probleme mit der Veränderlichkeit?

javascriptreactjsimmutability
47
Ilja

Array Push gibt die Länge zurück

this.state.myArray.Push('new value') gibt die Länge des erweiterten Arrays anstelle des Arrays selbst zurück.

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

Sie gehen davon aus, dass der zurückgegebene Wert das Array ist.

Unveränderlichkeit

Es scheint, dass es eher das Verhalten von React ist:

NIEMALS, this.state NIEMALS direkt zu mutieren, da der Aufruf von setState () danach möglicherweise Ersetzen Sie die Mutation, die Sie gemacht haben. Behandle diesen Zustand so, als wäre er unveränderlich.

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

Ich denke, Sie würden es so machen (mit React nicht vertraut):

var joined = this.state.myArray.concat('new value');
this.setState({ myArray: joined })
61
Tamás Márton

Mit es6 geht das so:

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

Spread-Syntax

72
Aliaksandr Sushkevich

Niemals empfohlen, den Zustand direkt zu mutieren.

Der empfohlene Ansatz in späteren React-Versionen ist die Verwendung einer Aktualisierungsfunktion, wenn Status geändert werden, um Race-Bedingungen zu verhindern:

Drücken Sie die Zeichenfolge an das Ende des Arrays

this.setState(prevState => ({
  myArray: [...prevState.myArray, "new value"]
}))

String an den Anfang des Arrays schieben

this.setState(prevState => ({
  myArray: ["new value", ...prevState.myArray]
}))

Objekt an das Ende des Arrays schieben

this.setState(prevState => ({
  myArray: [...prevState.myArray, {"name": "object"}]
}))

Objekt an den Anfang des Arrays schieben

this.setState(prevState => ({
  myArray: [ {"name": "object"}, ...prevState.myArray]
}))
25
Hemadri Dasari

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

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

Beachten Sie jedoch das spezielle Verhalten der .concat-Methode beim Übergeben von Arrays. [1, 2].concat(['foo', 3], 'bar') führt zu [1, 2, 'foo', 3, 'bar'].

10
Ginden

Sie sollten den Zustand überhaupt nicht bedienen. Zumindest nicht direkt. Wenn Sie Ihr Array aktualisieren möchten, müssen Sie so etwas tun.

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

Das direkte Bearbeiten des Zustandsobjekts ist nicht wünschenswert. Sie können auch einen Blick auf die Unveränderlichkeitshilfen von React werfen.

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

8
Christoph

Dieser Kodex funktioniert für mich:

fetch('http://localhost:8080')
  .then(response => response.json())
  .then(json => {
  this.setState({mystate: this.state.mystate.Push.apply(this.state.mystate, json)})
})
0
Hamid Hosseinpour

React-Native

wenn Sie außerdem möchten, dass Ihre Benutzeroberfläche (dh Ihre FlatList) auf dem neuesten Stand ist, verwenden Sie PrevState: In der folgenden Untersuchung wird der Benutzer auf die Schaltfläche klicken, um ein neues Objekt zur Liste hinzuzufügen Modell und die Benutzeroberfläche)

data: ['shopping','reading'] // declared in constructor
onPress={() => {this.setState((prevState, props) => {
return {data: [new obj].concat(prevState.data) };
})}}.
0
Mahgol Fa