Wie setze ich das Objekt des Objekts

Question

Ziel: Ich habe zwei Quadrate und ich möchte die Position des ausgewählten Quadrats ändern. Während ich es mache, muss ich die X-Koordinate, Y-Koordinate, Breite und Höhe des ausgewählten Quadrats ändern.

Hier ist mein Zustand, der die Daten für quadratische Informationen enthält.

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

Problem:taggedClothes haben zwei Quadrat Informationen und ich möchte nur ausgewählte Problem ändern, aber ich kompilieren immer Fehler

Here I setState seine taggedClothes bin Durchführung [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 
      }) 

Wenn Sie einen anderen Vorschlag haben, schlagen Sie bitte andere Option vor!

Answer 1

Der Schlüssel taggedClothes[0] ist nicht gültig. Sie müssen die taggedClothes und ersetzen nur die eine verbreiten, die sich geändert:

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

Sie versuchen, Ihre taggedClothes wie ein Array-Objekt zuzugreifen. dies ändern:

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

dass auf:

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

jetzt sollten Sie in der Lage sein taggedClothes zuzugreifen.