Question

我有这个对象数组。 NETSH WLAN start hostednetwork将打印

console.log(this.state.zones)

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

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

假设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 }) ) }] }] })为1且this.state.selectedZoneOnMenu为camera_id为123，为何上述setState失败？重新渲染时，我得到了未定义相机的错误。

Answer 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

Answer 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 }; });

setState用于2级嵌套对象数组

2 个答案: