Remplacer élément de tableau (entier) dans l'état

Question

je un simple tableau dans React de state, composé d'entiers seulement:

this.state = { 
    myArray: [1,2,3] 
} 

Je suis en train de remplacer une valeur d'une manière immuable (valeur 2 doit être remplacé par 8):

const valueToReplace = 2 
const newValue = 8 
const myArray = this.state.myArray 
const arrayPosition = myArray.indexOf(valueToReplace) 
const newArray = Object.assign([], myArray, {arrayPosition: newValue}) 

this.setState({myArray: newArray}) 

Mais mon chemin ne change pas myArray dans l'état. Je pense que je n'utilise pas Object.assign de la bonne façon.

Answer 1

Vous pouvez utiliser Array.prototype.slice pour copier le tableau, muter votre copie, puis l'affecter. Puisque vous créez un nouveau tableau au lieu de modifier un tableau existant, vous êtes toujours à l'abri des problèmes de mutation.

const valueToReplace = 2 
const newValue = 8 
const newArray = this.state.myArray.slice() // copy 
const arrayPosition = newArray.indexOf(valueToReplace) 
newArray[arrayPosition] = newValue 

this.setState({myArray: newArray}) 

Answer 2

Il est préférable de créer un clone d'un tableau d'abord, puis remplacer la valeur:

const valueToReplace = 2 
const newValue = 8 
const myArray = this.state.myArray.slice(0); 
const arrayPosition = myArray.indexOf(valueToReplace) 
myArray[arrayPosition] = newValue 

this.setState({myArray: newArray}) 

Les Object.assign seulement clones et objet/tableau dans un autre var et ne change pas la valeur dans le tableau.