Ich habe anscheinend Probleme, Daten in ein Statusarray zu verschieben. Ich versuche es so zu erreichen:

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

Aber ich glaube, das ist falsch und verursacht Probleme mit der Veränderlichkeit?

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. Array.prototype.push () .

Ich denke, Sie erwarten, dass der zurückgegebene Wert das Array ist.

Unveränderlichkeit

Es scheint eher das Verhalten von React zu sein:

Mutieren Sie diesen Zustand NIEMALS direkt, da der anschließende Aufruf von setState () die von Ihnen vorgenommene Mutation ersetzen kann. Behandle diesen Zustand so, als wäre er unveränderlich. React.Component .

Ich denke, du würdest es so machen (nicht mit React vertraut):

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

Mit es6 geht es folgendermaßen:

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

Syntax verbreiten

Nie empfohlen, den Staat direkt zu mutieren.

In späteren React-Versionen wird empfohlen, beim Ändern von Status eine Updater-Funktion zu verwenden, um Rennbedingungen zu vermeiden:

Schieben Sie die Zeichenfolge an das Ende des Arrays

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

Schieben Sie den String an den Anfang des Arrays

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]
}))

Sie sollten den Status überhaupt nicht betreiben. Zumindest nicht direkt. Wenn Sie Ihr Array aktualisieren möchten, sollten Sie Folgendes tun.

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

Es ist nicht wünschenswert, direkt am Statusobjekt zu arbeiten. Sie können sich auch die Unveränderlichkeitshilfen von React ansehen.

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

Mit der .concatMethode können Sie eine Kopie Ihres Arrays mit neuen Daten erstellen:

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

Aber Vorsicht vor dem besonderen Verhalten der .concatMethode beim Übergeben von Arrays - [1, 2].concat(['foo', 3], 'bar')wird dazu führen [1, 2, 'foo', 3, 'bar'].

Dieser Code 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)})
})

React-Native

Wenn Sie auch möchten, dass Ihre Benutzeroberfläche (dh Ihre FlatList) auf dem neuesten Stand ist, verwenden Sie PrevState: Wenn der Benutzer im folgenden Beispiel auf die Schaltfläche klickt, wird der Liste ein neues Objekt hinzugefügt (sowohl im Modell als auch in der Benutzeroberfläche )

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

Auf folgende Weise können wir die Objekte überprüfen und aktualisieren

this.setState(prevState => ({
    Chart: this.state.Chart.length !== 0 ? [...prevState.Chart,data[data.length - 1]] : data
}));

Hier können Sie das Objekt nicht in ein Statusarray wie dieses verschieben. Sie können wie gewohnt im normalen Array pushen. Hier müssen Sie den Zustand einstellen,

this.setState({ 
     myArray: [...this.state.myArray, 'new value'] 
})

Wenn Sie nur versuchen, den Status so zu aktualisieren

   handleClick() {
        this.setState(
{myprop: this.state.myprop +1}
        })
    }

Betrachten Sie diesen Ansatz

   handleClick() {
        this.setState(prevState => {
            return {
                count: prevState.count + 1
            }
        })
    }

Grundsätzlich schreibt prevState this.state für uns.