Javascript 反应-多个取消选择时复选框不更新

当我单击+按钮展开组并单击组1的复选框时，它将按预期执行。

但问题是，
如果我先单击组1的复选框，然后通过单击+按钮展开组，
它显示所有用户已单击，这是正确的，如果我再次单击组1的复选框，
组1的复选框变为未选中，但用户的复选框不会被选中

复制步骤： 刷新页面>单击组1复选框>单击+展开>再次单击组1复选框>然后您将看到用户复选框未被选中

下面的沙盒链接：

取消选择组1后，2个用户复选框不会变为取消选择：

---

您遇到的问题是第一次渲染时出现问题的结果-如您所见-您有“未定义的联系人”。您需要解决此问题，然后分组将按您的意愿工作。

您的

isExist

方法返回

undefined

，而不是

false

，请将其修复为始终返回

true

/

false

isExist=（id，group）=>{
如果（！this.props.selected）{
console.log（“selected=null”）；
返回false；
}
返回(
此.props.selected.find（（ele）=>ele.id==组+id）！==未定义
);
};

这样，您就不必使用

手动将其返回值转换为
布尔值

我建议也重构你的
handleSelected
方法

handleSelected=async（e）=>{
const{selected}=this.state；
如果（例如，选中目标）{
让temp={id:e.target.id，name:e.target.name}；
返回此.setState（{selected:[…selected，temp]}）；
}
这是我的国家({
selected:selected.filter（（{id}）=>id！==e.target.id）
});
};

我感谢你的努力。您可以删除代码中超出问题范围的内容吗？似乎太冗长了。我只是简化了代码。如果你能看一下，我将不胜感激。你必须通过代码手动取消选中它们。你应该使用嵌套数据结构来表示你的状态。问题是您的
组1
不知道其子组如何处理数据。您的组件基本上应该是
NestedCheckbox
。您能解释一下如何使用嵌套数据结构来表示状态吗？因此，首先单击+按钮应具有与首先单击组复选框相同的效果（创建组成员列表）。如果组成员列表未定义，我希望在单击clickbox/展开时获得组成员列表。首先感谢您的回答。现在可以选择/取消选择多个工作，但您可以尝试以下操作：刷新>单击+展开>无法选择组成员。等等，给我一分钟调试一下。