状態配列内のアイテムを編集するには？だからここ

Question

は私の状態です：インデックス1に「E」が「B」に変更されるように

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

はどのような状態を修正するに行きますか？例えば 同様：

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

はどのようにこれを行うことでしょうか？

Answer 1

私の提案は、不変の操作を使用するために慣れることですので、あなたは、内部状態のオブジェクトを変更しないでください。 react docsで指摘したように

：

はSETSTATE（）その後 あなたが作った突然変異を置き換えることを呼び出すと、直接this.stateを変異させることはありません。 this.stateをあたかも のように扱います。この場合

は、あなたが[1]使用slice()は、アレイの新しいコピーを取得することができ、は、[2]、その後、コピーを操作し、かつ、は、[3] SETSTATE新しい配列で置き換えます。それは良いpraticeだ。

そのような何か：

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：あなたがインデックスを知っているなら、あなたはこのようにそれを書くことができます：あなたは、インデックス、最初の使用array.findIndexまたはその他のループがわからない場合：

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

ケース2更新するアイテムのインデックスを取得した後、値を更新して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

2つのことは、ここで、注意すべき：

1. Array.spliceは変異型であり;それは操作している配列を変更しますが、これはスプレッド演算子のために配列の浅いコピーです。それについてもっと下に。
2. 戻り値Array.spliceは、実際にはが削除されたの要素であるため、スプライスの結果を直接割り当てることはできません。 AKA：setStateのIDに割り当てる変数にスライスの結果を代入しないでください。そうしないと、削除された値だけで終了します。項目1から深いコピー対浅いにフォローアップする

、あなたは（問題の文字列リテラルVS）オブジェクト参照を交換する場合、あなたはlodash's cloneDeepのようなものを使用する必要があることに注意してください。

handful of other ways around thisがあります。

また、浅いvs深度の詳細についてはSO itselfで読むことができます。