Question

我在使用react处理复选框时遇到问题，我想要的是状态应该反映复选框的条件，最后我想让[id-1, id-2, id-3]保存到后端。但我的演示似乎破了，我想我错过了一个条件，但我不知道我的问题是什么。

handleCheckboxChange = (device_id) => {
    const upateStatOfZoneCameraMenu = () => {
      this.setState({
        zones: [...this.state.zones.slice(0, this.state.selectedTab), {
          ...this.state.zones[this.state.selectedTab],
          cameras: [
            ...this.state.zones[this.state.selectedTab].cameras.map(
              o => ({
                ...o,
                checked: this.state.selectedCameras.find(o2 => o2 === o.device_id) || o.device_id === device_id
              })
            )
          ]
        }, ...this.state.zones.slice(this.state.selectedTab + 1)]
      })
    }

    const updatedSelectedCamera = this.state.selectedCameras.find(obj => obj === device_id)

    if (!updatedSelectedCamera) {
      this.setState({
        selectedCameras: [...this.state.selectedCameras, device_id]
      }, () => {
        upateStatOfZoneCameraMenu()
      })
    } else {
      this.setState({
        selectedCameras: this.state.selectedCameras.filter(obj => obj !== device_id)
      }, () => {
        upateStatOfZoneCameraMenu()
      })
    }   
  }

我认为问题出在第52行。

Answer 1

我已经分叉了您的沙箱，为您提供了一个工作版本：https://codesandbox.io/s/k5ml50ky13

你遇到的几个问题：

希望只更新一次状态而不是多次
checked属性的条件不清楚，所以我重写了以便只验证当前相机是否已经过检查

基本上我刚刚更改了函数handleCheckboxChange：

handleCheckboxChange = (device_id) => {
  const updatedSelectedCamera = this.state.selectedCameras.find(obj => obj === device_id);
  const selectedCameras = updatedSelectedCamera ? this.state.selectedCameras.filter(obj => obj !== device_id) : [...this.state.selectedCameras, device_id];

  this.setState({
    selectedCameras,
    zones: [
      ...this.state.zones.slice(0, this.state.selectedTab),
      {
        ...this.state.zones[this.state.selectedTab],
        cameras: [
          ...this.state.zones[this.state.selectedTab].cameras.map(
            o => ({
              ...o,
              checked: selectedCameras.includes(o.device_id),
            })
          )
        ]
      },
      ...this.state.zones.slice(this.state.selectedTab + 1)
    ],
  });
}

希望它有所帮助。

Answer 2

您的逻辑问题在于设置相机的checked状态。

我已将现有代码更改为：

checked: this.state.selectedCameras.find(o2 => o2 === o.device_id) !==undefined

你的代码中还有一些警告，说明迭代创建的元素中没有键，我通过在map方法渲染的div中添加一个键来修复App组件。

还有一个警告，用于将不受控制的组件更改为受控组件，当我在相机的初始状态下引入checked字段并将其设置为false时，该警告已得到修复。

详细代码可以找到here。

绑定复选框与反应中的嵌套对象数组

2 个答案: