reactjs - 如何setState对象的状态

Question

目标:我有两个方 block ，我想更改所选方 block 的位置。在执行此操作时，我需要更改所选方 block 的 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 有两个方形信息，我只想更改选定的问题，但出现编译错误

这里我正在对其 taggedClothes[0] 执行 setState

// 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

key 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
    }
  })