javascript - 将复选框与 React 中的嵌套对象数组绑定(bind)

Question

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

<强> https://codesandbox.io/s/kpw23v4xv

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

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

我已将现有代码更改为:

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

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

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

详细代码可见here .