状態のオブジェクトのオブジェクトを固定する方法

Question

ゴール：2つの正方形があり、選択した正方形の位置を変更したいと思います。私はそれをやっている間、選択した四角形のx座標、y座標、幅、および高さを変更する必要があります。

ここは正方形の情報を保持する私の状態です。

state = { 
    gestureState: {}, 
    thumbSize: 100, 
    left: width(100)/2, 
    top: height(100)/2, 
    taggedClothes: { 
     0: {id:0, left:100, top:100, thumbSize:100}, <- I want to setState this 
     1: {id:1, left:200, top:200, thumbSize:200}, 
    }, 
    selectedClothId : 0, 
    } 

問題：taggedClothesは2つの平方情報を持っていると私は唯一の選択の問題を変更したいが、私は私がSETSTATEそのtaggedClothesを行っています。ここ

エラーにコンパイル取得しています[0]

// this.state.selectedColorId = 0 
var deep = _.cloneDeep(this.state.taggedClothes[this.state.selectedColorId]); 
      deep.left = left 
      deep.top = top 
      deep.thumbSize = thumbSize 
      this.setState({ 
      gestureState: { 
       ...gestureState 
      }, 
      taggedClothes[0]: deep <- Getting Compile Error 
      }) 

他の提案がある場合は、他のオプションをお勧めします。

Answer 1

キーtaggedClothes[0]は無効です。あなたのtaggedClothesは、配列のようにオブジェクトにアクセスしようとしている

var deep = _.cloneDeep(this.state.taggedClothes[this.state.selectedColorId]); 
    deep.left = left 
    deep.top = top 
    deep.thumbSize = thumbSize 
    this.setState({ 
    gestureState: { 
     ...gestureState 
    }, 
    taggedClothes: { 
     ...taggedClothes, 
     [this.state.selectedColorId]: deep 
    } 
    }) 

Answer 2

：あなたはtaggedClothesを広げてのみ変更1を交換する必要があります。 変更この：それに

taggedClothes: { 
     0: {id:0, left:100, top:100, thumbSize:100}, <- I want to setState this 
     1: {id:1, left:200, top:200, thumbSize:200}, 
}, 

：

taggedClothes: [ 
     {id:0, left:100, top:100, thumbSize:100}, 
     {id:1, left:200, top:200, thumbSize:200}, 
], 

今あなたがtaggedClothesにアクセスすることができるはずです。