Javascript 映射嵌套复选框不工作

我有一个函数，一旦选中主复选框，就会触发子复选框，所有这些复选框都是从JSON映射而来的。主复选框（最高顺序）及其下的所有子复选框（第二顺序）显示在复选框上，其工作状态良好，我试图显示的是主复选框（第三顺序）的子复选框的子复选框

基本上是在检查时显示彼此下的所有三个订单，并将第三个订单添加到我的当前代码中，因此选项组显示选项，而选项下的是我要显示的，它们是选项1，选项2，选项3等等

复选框值作为道具从执行获取/映射的checkbox.js传递到Itemlist.js

当我试图实现这一点时，我已经能够显示这些三阶复选框中的每一个，但每一个都是单独显示的，而不是将它们显示为嵌套的复选框。我尝试将其包含在现有映射函数中，以将它们全部显示为前面提到的嵌套复选框，但它无法工作。它仅在单独映射而不是当前映射路径（const selectedItem）时工作。当目标复选框（第三级）的映射路径作为const selectedMod添加到Itemlist.js中时

主要片段：

到目前为止，我的目标是显示目标复选框，但单独显示：

Checkbox.js

import React from "react";
import "./Checkbox.css";

class Checkboxes extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      currentData: 0,
      limit: 2,
      checked: false
    };
  }

  selectData(id, event) {
    let isSelected = event.currentTarget.checked;
    if (isSelected) {
      if (this.state.currentData < this.props.max) {
        this.setState({ currentData: this.state.currentData + 1 });
      } else {
        event.preventDefault();
        event.currentTarget.checked = false;
      }
    } else {
      if (this.state.currentData >= this.props.min) {
        this.setState({ currentData: this.state.currentData - 1 });
      } else {
        event.preventDefault();
        event.currentTarget.checked = true;
      }
    }
  }

  render() {
    const input2Checkboxes =
      this.props.options &&
      this.props.options.map(item => {
        return (
          <div className="inputGroup2">
            {" "}
            <div className="inputGroup">
              <input
                id={this.props.childk + (item.name || item.description)}
                name="checkbox"
                type="checkbox"
                onChange={this.selectData.bind(
                  this,
                  this.props.childk + (item.name || item.description)
                )}
              />
              <label
                htmlFor={this.props.childk + (item.name || item.description)}
              >
                {item.name || item.description}{" "}

              </label>
            </div>
          </div>
        );
      });

    return (
      <form className="form">
        <div>
          {/** <h2>{this.props.title}</h2>*/}
          <div className="inputGroup">
            <input
              id={this.props.childk + this.props.name}
              name="checkbox"
              type="checkbox"
              checked={this.state.checked}
              onChange={this.selectData.bind(
                this,
                this.props.childk + this.props.uniq
              )}
              onChange={() => {
                this.setState({
                  checked: !this.state.checked,
                  currentData: 0
                });
              }}
            />
            <label htmlFor={this.props.childk + this.props.name}>
              {this.props.name}{" "}
            </label>
          </div>{" "}
          {this.state.checked ? input2Checkboxes : undefined}
        </div>
      </form>
    );
  }
}

export default Checkboxes;

从“React”导入React；
导入“/Checkbox.css”；
类复选框扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
当前数据：0，
限额：2，
勾选：假
};
}
选择数据（id、事件）{
让isSelected=event.currentTarget.checked；
如果（当选）{
if（this.state.currentData=this.props.min）{
this.setState（{currentData:this.state.currentData-1}）；
}否则{
event.preventDefault（）；
event.currentTarget.checked=true；
}
}
}
render（）{
常量输入2复选框=
这个。道具。选项&&
this.props.options.map（项=>{
返回(
{" "}
{item.name | | item.description}{”“}
);
});
返回(
{/**{this.props.title}*/}
{
这是我的国家({
选中：！this.state.checked，
当前数据：0
});
}}
/>
{this.props.name}{”“}
{" "}
{this.state.checked？Input2Checkbox:未定义}
);
}
}
导出默认复选框；

Itemlist.js映射函数发生的位置

...

      const selectedItem =
        selectedChild.children && selectedChild.children.length
          ? selectedChild.children[this.state.itemSelected]
          : null;

...

  <div>
                {selectedItem &&
                  selectedItem.children &&
                  selectedItem.children.map((item, index) => (
                    <Checkboxes
                      key={index}
                      name={item.name || item.description}
                      myKey={index}
                      options={item.children}
                      childk={item.id}
                      max={item.max}
                      min={item.min}
                    />
                  ))}
              </div>
...

。。。
常量selectedItem=
selectedChild.childrence&&selectedChild.childrence.length
? selectedChild.children[此.state.itemSelected]
：null；
...
{selectedItem&&
选择他们的孩子&&
选择editem.children.map（（项目，索引）=>(
))}
...