如何編輯狀態數組中的項目？

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淺與深。