reactjs - 如何设置状态对象的状态对象

目标：我有两个广场，我想更改所选广场的位置。在执行此操作时，我需要更改所选正方形的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的aggedClothes [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
          })

如果您还有其他建议，请提出其他选择！

最佳答案

密钥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
    }
  })