Javascript 使用react中的嵌套对象数组绑定复选框

我在使用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行。

我已经为您提供了一个工作版本：

您遇到的几个问题：

宁愿只更新一次状态，而不是多次更新

您在

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

---

希望能有所帮助。

我已经为您的沙箱提供了一个工作版本：

您遇到的几个问题：

宁愿只更新一次状态，而不是多次更新

您在

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

---

希望有帮助。

您的逻辑问题在于设置相机的

选中状态

我已将现有代码更改为：

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

代码中也有关于键不存在于迭代创建的元素中的警告，我通过向map方法呈现的div添加一个键，在App组件中修复了该警告

将非受控组件更改为受控组件时还有另一个警告，当我在相机的初始状态中引入
checked
字段并将其设置为false时，该警告已修复

可以找到详细的代码。
您的逻辑问题在于设置相机的
选中状态

我已将现有代码更改为：

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

代码中也有关于键不存在于迭代创建的元素中的警告，我通过向map方法呈现的div添加一个键，在App组件中修复了该警告

将非受控组件更改为受控组件时还有另一个警告，当我在相机的初始状态中引入
checked
字段并将其设置为false时，该警告已修复

可以找到详细的代码。
抓到了！！不知道find return undefined而不是False我不明白为什么您验证了这个答案而不是我的答案，因为我指出了对React哲学的一些误解和正确的测试方法。这个答案有效，但不是正确的方法。不管怎样，接球不错！！不知道find return undefined而不是False我不明白为什么您验证了这个答案而不是我的答案，因为我指出了对React哲学的一些误解和正确的测试方法。这个答案有效，但不是正确的方法。无论如何