web-dev-qa-db-fra.com

React.js - Quel est le meilleur moyen d'ajouter une valeur à un tableau en état

J'ai un tableau dans l'état, disons this.state.arr . Je veux ajouter quelque chose à cette propriété d'état, puis changer quelques propriétés supplémentaires.

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

Donc .. Je sais que cet état est censé être traité de manière immuable. Mais est-il possible de l’utiliser comme dans l’option 1 où j’ai toujours l’état, ou dois-je utiliser quelque chose comme l’option 2, et donc toujours faire une copie en mémoire 

memorystatereactjs
40
Flion

Les deux options que vous avez fournies sont les mêmes. Tous les deux vont toujours pointer sur le même objet en mémoire et avoir les mêmes valeurs de tableau. Vous devez traiter l'objet d'état comme immuable, comme vous l'avez dit. Toutefois, vous devez recréer le tableau afin qu'il pointe vers un nouvel objet, définissez le nouvel élément, puis réinitialisez l'état. Exemple:

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

Pour l'instant, c'est le meilleur moyen.

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

Si vous utilisez la syntaxe ES6, vous pouvez utiliser l’opérateur spread pour ajouter de nouveaux éléments à un tableau existant en une ligne.

// 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

Un autre moyen simple d'utiliser concat:

this.setState({
  arr: this.state.arr.concat('new value')
})
15
TiagoLr

le meilleur parti maintenant.

this.setState({ myArr: [...this.state.myArr, new_value] })
0
Pycc34
handleValueChange = (value) => {
      let myArr= [...this.state.myArr]
      myArr.Push(value)
      this.setState({
         myArr
     })

Cela pourrait faire le travail.

0
Harshit Singhai

Si vous voulez continuer à ajouter un nouvel objet au tableau que j'ai utilisé:

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