Manière correcte d'insérer un tableau d'état

Question

Je semble avoir des problèmes pour transférer des données dans un tableau d'état. J'essaie d'y arriver de cette façon:

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

Mais je crois que ceci est incorrect et cause des problèmes de mutabilité?

Answer 1

En utilisant es6, cela peut être fait comme ceci:

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

Syntaxe Spread

Answer 2

Tableau pousser retourne la longueur

this.state.myArray.push('new value') renvoie la longueur de la gamme étendue, à la place du tableau lui-même.

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

Je suppose que vous attendez la valeur retournée à la matrice.

L'immutabilité

Il semble que c'est plutôt le comportement de Réagir:

JAMAIS muter cette.l'état directement, comme l'appel à setState() après peut remplacer la mutation que vous avez fait. Traiter cela.état comme si c'était immuable.

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

Je suppose que, vous serait-il faire comme cela (pas familier avec Réagir):

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

Answer 3

Jamais recommandé à la mutation de l'état directement.

L'approche recommandée au plus tard Réagir versions est d'utiliser un programme de mise à jour de la fonction lors de la modification des états de prévenir des conditions de course:

Pousser la chaîne à la fin du tableau

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

Pousser la chaîne de début du tableau

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

Push d'objet à la fin du tableau

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

Pousser objet de début du tableau

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

Answer 4

Vous ne devriez pas faire fonctionner l'état du tout. Du moins pas directement. Si vous souhaitez mettre à jour votre tableau, vous voudrez faire quelque chose comme ceci.

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

Travailler directement sur l'objet d'état n'est pas souhaitable. Vous pouvez également consulter les aides à l'immutabilité de React.

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

Answer 5

Vous pouvez utiliser la méthode .concat pour créer une copie de votre tableau avec de nouvelles données:

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

Mais méfiez-vous du comportement spécial de la méthode .concat lors du passage de tableaux - [1, 2].concat(['foo', 3], 'bar') entraînera des [1, 2, 'foo', 3, 'bar'] .