为Tree View节点从数组添加子节点时出现重复值错误求助

问题原因 #

你循环生成父节点时，所有子节点都硬编码使用了data[0].children[0]的id和name，导致所有子节点的value都是同一个值（比如报错里的'01-C11'），而CheckboxTree要求所有节点的value必须唯一，因此触发了重复值错误。

修复代码 #

把硬编码的子节点改为遍历当前父节点对应的子节点数据，示例如下：

const persons = [];
for (let i = 0; i < data.length; i++) {
  // 遍历当前父节点的子节点，生成对应的子节点数组
  const children = data[i].children?.map(child => ({
    value: child.id,
    label: child.name
  })) || [];
  
  persons.push({ 
    value: data[i].id, 
    label: data[i].name,
    children: children
  });
} 

this.setState({ persons });

关键说明 #

• 用data[i].children替代data[0].children[0]，确保每个父节点的子节点都是自己对应的子数据，而非重复使用同一个子节点
• 用?.map处理可能不存在children的情况，避免报错；如果确定每个父节点都有children，可以省略?.和|| []

内容的提问来源于stack exchange，提问作者AlexDemo