替换状态中的数组元素(整数)

时间:2017-05-10 20:45:56

标签: javascript reactjs immutability

我在React' s state中有一个简单的数组,只包含整数:

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

我尝试以不可变的方式替换值(值2应替换为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})

但我的方式并没有改变状态myArray。我想我没有以正确的方式使用Object.assign

2 个答案:

答案 0 :(得分:2)

您可以使用Array.prototype.slice复制数组,改变副本,然后进行分配。由于您正在创建新阵列而不是修改现有阵列,因此您仍然可以避免发生突变问题。

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

答案 1 :(得分:1)

最好先创建一个数组克隆,然后替换值:

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

Object.assign只将克隆和对象/数组放入另一个var中,并且不会更改数组中的值。