Javascript 对象的2级嵌套数组的设置状态

我有这个对象数组<代码>控制台.log（this.state.zones）将打印

[
  {
    "name": "Zone 1",
    "cameras": []
  },
  {
    "name": "Zone 2",
    "cameras": [
      {
        "device_id": 123,
        "entrance_name": "East Gate",
        "name": "SA-PCS-010",
      }
    ]
  }
]

我想添加一个checked属性，其值为true或false，我在下面尝试了

this.setState({
  zones: [{
    ...this.state.zones,
      cameras: [{
        ...this.state.zones[this.state.selectedZoneOnMenu].cameras.map(
          o => ({...o, checked: o.device_id === camera_id ? true : false
          })
        )
      }]
  }]
})

---

假设

此.state.selectedZoneOnMenu

为1，而

摄像机id

为

“设备id”

为123，为什么上述设置状态失败？重新渲染时，我收到未定义摄影机的错误。

您使用的状态设置不正确，因为扩展运算符语法不在正确的位置。试试这个

this.setState({
  zones: [ ...this.state.zones.slice(0, this.state.selectedZoneOnMenu), {
      ...this.state.zones[this.state.selectedZoneOnMenu],
      cameras: [
        ...this.state.zones[this.state.selectedZoneOnMenu].cameras.map(
          o => ({...o, checked: o.id === camera_id ? true : false
          })
        )]
  }, ...this.state.zones.slice(this.state.selectedZoneOnMenu + 1)]
})

---

但是，您的状态是深度嵌套的，您可以为您的状态使用，或者使用

您可以使用functional

setState

来防止变异，而且在我看来，您的代码更易于阅读

示例

this.setState((prevState) => {
  const zones = Object.assign({}, prevState.zones);
  const { selectedZoneOnMenu } = prevState;
  zones[selectedZoneOnMenu].cameras = zones[selectedZoneOnMenu].cameras.map((camera) => (
    Object.assign({}, camera, { checked: (camera.device_id === camera_id) })
  ));
  return { zones };
});

---

对于嵌套状态，最好使用ImmutableJS。您的代码将非常清楚为什么在这里使用slice？我不明白。特别是此处需要this.state.selectedZoneOnMenu+1许可证，因为您只想修改数组的一个元素，所以在此之前和之后保持另一个对象不变，并替换要修改的对象