如何编辑状态数组中的项目？

Question

因此，这里是我的状态：

this.state = { 
    ids: ['A', 'E', 'C'] 
}; 

我怎么会去索引1处修改状态，使“E”更改为“B”？ 像例如：

this.setState({ 
    ids[1]: 'B' 
}); 

这将如何完成？

Answer 1

我的建议是习惯使用一成不变的操作，所以您不要修改内部状态的对象。

正如react docs指出：

不要直接变异this.state，如调用的setState（）之后可能 代替您作出的突变。 将this.state视为不可变的 。

在这种情况下，您可以[1]使用slice()得到阵列的新副本，[2]操纵副本里，然后，[3]的setState与新阵列。这是一个很好的实践。

类似的东西：

let newIds = this.state.ids.slice() //copy the array 
newIds[1] = 'B' //execute the manipulations 
this.setState({ids: newIds}) //set the new state 

Answer 2

案例1：如果你知道索引，那么你可以写这样的：

let ids = [...this.state.ids];  // create the copy of state array 
ids[index] = 'k';     //new value 
this.setState({ ids });   //update the value 

案例2：如果你不知道该指数则先用array.findIndex或任何其他环获取要更新的项目的索引，然后更新该值并使用setState。

像这样：

let ids = [...this.state.ids]; 
let index = ids.findIndex(el => /* condition */); 
ids[index] = 'k';     
this.setState({ ids });    

Answer 3

建立在什么@ mayank - 舒克拉写道（案例2：知道更换项目的索引），这可能也与Array.splice写成：

const replacement = 'B'; 
let copy = [...this.state.ids] 
copy = copy.splice(index, 1, replacement) 

this.setState({ 
    ids: copy, 
}) 

REPL Example

有两点需要注意，在这里：

1. Array.splice是变异;它会改变它所操作的数组，但由于扩展运算符的原因，这是数组的浅层副本。更多关于下面的内容。
2. 您无法直接指定拼接的结果，因为返回值Array.splice实际上是删除的元素。 AKA：不要将您的切片的结果分配给您打算分配给setState中的ID的变量，否则您将只以删除的值结束。

从第1项上浅VS深层副本跟进，请注意，如果您要更换对象引用（VS在这个问题字符串）中，您将需要使用像lodash's cloneDeep。但是，有handful of other ways around this。

您还可以阅读更多关于SO itself浅与深。