setState 用于对象的 2 级嵌套数组答案

【问题标题】：setState for a 2 level nested array of objectsetState 用于对象的 2 级嵌套数组
【发布时间】：2017-11-03 09:33:26
【问题描述】：

我有这个对象数组。 console.log(this.state.zones) 将打印出来

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

我想添加一个值为true或false的checked属性，我尝试了以下尝试。

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

假设this.state.selectedZoneOnMenu是1，camera_id是'device_id'是123，为什么上面的setState失败了？重新渲染时出现未定义的相机错误。

【问题讨论】：

对于嵌套状态最好使用 ImmutableJS。你的代码会很清晰

标签： javascript reactjs ecmascript-6

【解决方案1】：

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

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

但是，您的状态嵌套很深，您可以将 ImmutableJS 用于您的状态或使用 immutability-helper npm package

【讨论】：

为什么在这里使用切片？我不明白。尤其是 this.state.selectedZoneOnMenu + 1
这里需要切片，因为您只想修改数组的一个元素，因此您在此之前和之后保持另一个对象不变并替换您要修改的对象

【解决方案2】：

您可以使用功能性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 };
});

【讨论】：