Question

目标：我有两个方格，我想更改所选方格的位置。在我这样做的同时，我需要更改所选方形的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有两个方形信息，我想只更改选定的问题，但我收到编译错误

我在这里执行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对象。改变这个：

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

到那个：

{{1}}

现在您应该能够访问taggedClothes。

如何setState状态对象的对象

2 个答案: