web-dev-qa-db-de.com

React.js - Was ist der beste Weg, einem Array im Zustand einen Wert hinzuzufügen

Ich habe ein Array im Zustand, sagen wir dazu this.state.arr . Ich möchte dieser Zustandseigenschaft etwas hinzufügen und dann einige weitere Eigenschaften ändern.

Option 1

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

Option 2

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

Also ... ich weiß das. Zustand soll unveränderlich behandelt werden. Aber ist es in Ordnung, es wie in Option 1 zu verwenden, wo ich immer noch den Status von ihm setze, oder muss ich mit etwas wie Option 2 gehen und daher immer zuerst eine Kopie im Speicher machen 

memorystatereactjs
40
Flion

Beide Optionen sind identisch. Beide zeigen immer noch auf dasselbe Objekt im Speicher und haben die gleichen Array-Werte. Sie sollten das Statusobjekt als unveränderlich behandeln, wie Sie es gesagt haben. Sie müssen das Array jedoch so erstellen, dass es auf ein neues Objekt zeigt, das neue Element festlegen und dann den Status zurücksetzen. Beispiel:

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

Im Moment ist dies der beste Weg.

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

Wenn Sie die ES6-Syntax verwenden, können Sie den Operator spread verwenden, um einem vorhandenen Array neue Elemente als Einliner hinzuzufügen.

// 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'] });
30
JamieD

Ein anderer einfacher Weg mit concat:

this.setState({
  arr: this.state.arr.concat('new value')
})
15
TiagoLr
onChange() {
     const { arr } = this.state;
     let tempArr = [...arr];
     tempArr.Push('newvalue');
     this.setState({
       arr: tempArr
    });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
2
SAMAR

das beste jetzt weg.

this.setState({ myArr: [...this.state.myArr, new_value] })
0
Pycc34

Dies beantwortet Ihre Frage möglicherweise nicht direkt, sondern im Interesse derjenigen, die mit Staaten wie der folgenden kommen

 state = {
    currentstate:[
     {
    id: 1 ,
    firstname: 'zinani',
    sex: 'male'

     }
    ]

 }

Lösung

const new_value = {
    id: 2 ,
    firstname: 'san',
    sex: 'male'

     }

Ersetzen Sie den aktuellen Status durch den neuen Wert

 this.setState({ currentState: [...this.state.currentState, new_array] })
0
Excellent Lawrence
handleValueChange = (value) => {
      let myArr= [...this.state.myArr]
      myArr.Push(value)
      this.setState({
         myArr
     })

Das könnte die Arbeit erledigen.

0
Harshit Singhai

Wenn Sie dem Array ein neues Objekt hinzufügen möchten, das ich verwendet habe:

_methodName = (para1, para2) => {
  this.setState({
    arr: this.state.arr.concat({para1, para2})
  })
}
0
Mygel Bergstresser