使用 setState() 设置更复杂的数据

Question

我想要实现的是能够使用 setState 方法将对象设置为状态。但是我在这样做时面临一些困难。

这是我要达到的最终产品（状态）

  state_class_mapping: {
        {1} ,
        rect: {
          fill: "deepskyblue"
        },
        label: {
          stroke: "white"
        }

这个值是从不同的区域获取的，rect和label是在我初始化的状态下预设的：

 constructor(props) {
super(props)

this.state = {
  selected_state: null,
  state_class_mapping: {},
  selected_state_class: {         #<---- here 
    rect: {
      fill: "deepskyblue"
    },
    label: {
      stroke: "white"
    }
  },
  default_state_class: {     #<---- or here depending 
    rect: {
      fill: "#dddd"
    },
    label: {
      stroke: "black"
    }
  }
  }

整数值实际上是我点击的对象的 ID。点击这个对象后，我会运行一些函数来设置“selected_state”。

我的问题是我在创建 state_class_mapping 状态时遇到问题，因为它比设置静态键和值更复杂。

我设想的设置方式是：

this.setState({state_class_mapping:{
    {this.state.selected_state},
    {this.state.default_state_class}
  })
  }
}

当然，我的编辑表明这样做是非法的。我可以知道这样做的正确方法是什么吗？

Answer 1

我刚刚查看了您的代码，我认为您错过了一些 sn-ps。 首先，您需要根据您在状态定义中声明的确切类型声明正确的对象。 所以我认为你需要这样尝试。

this.setState({state_class_mapping: {
   idValue, 
   ...this.state.selected_state, 
   ...this.state.default_state_class
}});

您没有将 state_class_mapping 类型声明为 { {}, [{}]}，因此您的代码无法正常工作。 您声明为这种类型 {{}, {}}

希望这能帮助你理解。